动画小结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动画小结相关的知识,希望对你有一定的参考价值。

在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效果 

 

以上是关于动画小结的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

使用嵌套片段和动画对象

Android:将“ViewPager”动画从片段更改为片段

Android 动画嵌套片段

配置更改后片段丢失过渡动画

在ViewPager上,在onPageSelected上的片段上启动动画