CSS3 animation，好玩的动画

animation：demoMove   A   B   C  D  E     （keyframe 名   执行时间   速率函数   延迟时间   运动方式   运动次数 ）

@keyframes demoMove{ 0%{ background-color:red;}

10%{ background-color:green;}

20%{ background-color:white;}

50%{ width:200px;}

100%{ height:200px;} }

 

animation 属性为css3的复合属性，主要包括以下子属性

animation-name:  此属性为执行动画的 keyframe 名

animation-duration:此属性为动画执行的时间 （可设置s 和ms）

animation-timing-function:指定过渡函数速率 （可以设置一下单词） 

1. linear:匀速
2. ease：慢，快，慢（开始 过渡 结束 三个阶段）
3. ease-in:慢速开始  快，慢
4. ease-out :慢  慢速过渡  慢
5. ease-in-out:慢，快   慢速结束
6. cubic-beier(n,n,n,n) (自定义函数)

对函数速率进行扩展

详细文章：https://blog.csdn.net/qq_25600055/article/details/51045163

 

animation-delay: 执行延迟时间 （可设置s 和ms）

animation-iteration-count:infinite/number;  运动次数 infinite（无限次）    

animation-direction: normal/reverse/alternate/alternate-reverse;   运动方式（默认normal）

1. reverse    动画反向播放(从100%开始)。
2. alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放           
3. alternate-reverse    动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

 animation-play-state:   属性主要用来控制元素动画的播放状态。             

running 播放             paused  暂停

animation-fill-mode:   属性定义在动画开始之前和结束之后发生的操作。

主要具有四个属性值：             

1. none:                 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处                 
2. forwards:                 表示动画在结束后继续应用最后的关键帧的位置             
3. backwards:                 会在向元素应用动画样式时迅速应用动画的初始帧（结合延迟1s来看）             
4. both:                 元素动画同时具有forwards和backwards效果

动画关键帧 @keyframes xxx

动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。

0% - 100% 代表动画的时间过渡

帧频里面如果只有 0% 和 100%两个关键帧，那么可以用 from to 代替

详细文章：https://blog.csdn.net/u013243347/article/details/79976352

补充CSS3属性：

transform-origin 变换原点（修改运动中心原点。比如实现时钟刻度位子）

任何一个元素都有一个中心点， 默认情况下，其中心点是居于元素x轴和y轴的50%处，如图。