如何实现css3动画属性之Transitions属性与Animations属性的功能

2023 - 2 - 22 作者 : 石家庄SEO 分类 :
  • TAG :
|

    %E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0css3%E5%8A%A8%E7%94%BB%E5%B1%9E%E6%80%A7%E4%B9%8BTransitions%E5%B1%9E%E6%80%A7%E4%B8%8EAnimations%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8A%9F%E8%83%BD

(1)浏览器支持:

到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上浏览器支持该功能。

(2)功能

在CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。

(3)使用方法

property:表示对哪个属性进行平滑过渡。

duration:表示在多久时间内完成属性值得平滑过渡。

timing-function:表示通过什么方法进行平滑过渡。

(4)另一种使用方法

(5)transition-delay属性

指定变换动画特效延迟多久后开始执行。可以用秒单位或毫秒单位指定属性值。

(6)使用Transitions功能同时平滑过渡多个属性值

(7)移动、旋转等动画效果

(8)缺点

只能指定属性的开始值与终点值,然后再这两个属性值之间实现平滑过渡,不能实现更为复杂的动画效果。

(1)浏览器支持:

到目前为止:Safari4以上、Chrome2以上、Firefox20以上、Opera18以上、IE11以上浏览器支持该功能。

(2)功能

与Transitions功能相同,都是通过改变元素的属性值来实现动画效果。

区别:Animations功能通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

(3)创建关键帧的集合

@keyframes 关键帧集合名{ 创建关键帧的代码 }

(4)创建关键帧的代码(类似如下)

40%{ 本关键帧中的样式代码 }

(40%表示改帧位于整个动画过程中的40%处,开始帧为0%,结束帧为100%)

(5)在元素的样式中使用该关键帧的集合

(6)其他属性

animation-delay:用于指定延迟多少秒或毫秒后开始执行动画。

animation-iteration-count:用于指定动画的执行次数,可指定为infinite(无限次)。

animation-direction:用于指定动画的执行方向。可指定属性值包括:

normal:初始值(动画执行完毕后返回初始状态)

alternate:交替更换动画的执行方向

reverse:反方向执行动画

alternate-reverse:从反方向开始交替更改动画的执行方向

(7)在一行样式代码中定义animation动画时采用如下所示的书写方式

animation:keyframe的名称 动画的执行时长 动画的实现方法 延迟多少秒后开始执行动画 动画的执行次数 动画的执行方向;

(8)实现多个属性值同时改变的动画

只需只在各关键帧中同时指定这些属性值就可以了。

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。