动画小结

Posted 2020-06-14

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式

第二，声明过渡元素最终状态样式，比如悬浮状态

第三，在默认样式中通过添加过渡函数，添加一些不同的样式

 

CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的css属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间 

 

transition-property: none | all | [ident]... 

transition-duration: time

transition-timing-function: ease（速度逐渐变慢） | linear（恒速） | ease-in（加速状态，渐显效果） | ease-out（减速状态，渐隐效果） | ease-in-out（先加速再减速，渐显渐隐效果）

transition-delay: time

 

例子：

-webkit-transition:all .5s ease-in .2s;

    transition:all .5s ease-in .2s; 

 

keyframes介绍 

keyframes被称为关键帧，其类似于flash中的关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号{...} ，括号内就是一些不同时间段样式规则

如：

@-webkit-keyframes test{

  0%{background:green;}

100%{background:red;}

}

还可以用 form to 实现上面效果

 

动画，主要包括下面几个子属性 

调用动画

 

animation-name属性主要是用来调用@keyframes定义好的动画。需要特别注意：animation-name调用的动画名需要和"@keyframes“定义的动画名完全一致，区分大小写

如调用上面例子定义好的动画 

animation-name:test; 

 

animation-name：调用动画

animation-duration：设置动画播放时间

animation-timing-function：设置动画播放方式

animation-delay：设置动画开始播放时间

animation-iteration-count:infinite  | <number>   设置动画播放次数:无限 | 设置次数

animation-play-state:running | paused  设置动画的播放状态 

animation-direction:normal |alternate  设置动画播放方向 【注意：alternate，动画播放在第偶数次向前播放，第奇数次反方向播放】

animation-fill-mode：设置动画时间外属性，该属性定义在动画开始之前和结束之后发生的操作

 

补充： 

animation-fill-mode:none | forwards | backwards | both

none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards：表示动画在结束后继续应用最后的关键帧的位置

backwards：会在向元素应用动画样式时迅速应用动画的初始帧

both：元素动画同时具有forwards和backwrads效果