web前端
您现在所在的位置:首页>企业动态>web前端

过渡动画和关键帧动画使用和区别,web前端基础知识,web前端培训

编辑:学到牛牛IT培训    发布日期: 2022-02-10 10:03:25  

一、CSS3 过渡

 1、transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值

transition-property:检索或设置对象中的参与过渡的属性

transition-duration:检索或设置对象过渡的持续时间

transition-delay:检索或设置对象延迟过渡的时间

transition-timing-function:检索或设置对象中过渡的动画类型

2、贝塞尔曲线:

属性值:cubic-bezier()

贝塞尔曲线网址:http://cubic-bezier.com/

简写:transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

最简写:transition:运动时间s/ms

案例:悬停div,让p标签沿着x方向发生位移

<style>
  div{
    width:500px;
    height:500px;
    background:pink;
  }
  p{
      width:100px;
    height:100px;
    background:red;
    transition:.2s
  }
  div:hover p{
      transform:translateX(400px);
  }
  </style>
  <div>
    <p></p>
  </div>
<style>

二、CSS3 帧动画

1、animation

帧动画是通过一帧一帧的画面按照固定顺序和速度播放,如电影胶片。可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

语法:

第一步:先用@keyframes 制定运动动画的轨迹规则

@keyframes myMove{

from{初始状态属性}

to{结束状态属性}

}

@keyframes myMove{

0%{初始状态属性}

100%{结束状态属性}

}(中间再可以添加关键帧)

备注:mymove是给动画起的名字

免费试学
课程好不好,不如实地听一听

封闭学习

2

1

联系我们

电话:028-61775817

邮箱:1572396657@qq.com

地址:成都市金牛区西城国际A座8楼

  • web前端_Html5资源教程和资源分享-学到牛牛
    web前端_Html5资源教程和资源分享-学到牛牛

    扫一扫,免费咨询

  • web前端_Html5资源教程和资源分享-学到牛牛
    web前端_Html5资源教程和资源分享-学到牛牛

    微信公众号

  • web前端_Html5资源教程和资源分享-学到牛牛
web前端_Html5资源教程和资源分享-学到牛牛

学一流技术,找高薪工作

web前端_Html5资源教程和资源分享-学到牛牛

7-24小时服务热线:

028-61775817

版权声明 网站地图

蜀ICP备2021001672号

课程问题轻松问