CSS的animation属性如何使用实例讲解

网络
秋天来啦！秋天来啦！田野里就是美丽的图画。花生躲在地下，包着红色的毛毯，住在土黄色的房间里睡大觉。玉米姐姐穿着绿色的裙子，在叶子上跳舞，南瓜爷爷鼓着金黄色的大肚子，坐着高级的南瓜车，一边看风景一边享受。西红柿露出火红火红的脸蛋，正对着我们微笑。谁使秋天这样美？看，田野里的菊花做出了回答，菊花顶着一个爆炸头，在微风中轻轻摇动，好像在说：是勤劳的人们画出了秋天的图画。

一、animation的语法

1、@keyframes——插入关键帧

(1)FormTo形式：

CSS Code复制内容到剪贴板
  1. @keyframesdemo{
  2. from{
  3. Properties:Propertiesvalue;
  4. }
  5. Percentage{
  6. Properties:Propertiesvalue;
  7. }
  8. to{
  9. Properties:Propertiesvalue;
  10. }
  11. }



(2)百分比的形式：

CSS Code复制内容到剪贴板
  1. @keyframesdemo{
  2. 0%{
  3. Properties:Propertiesvalue;
  4. }
  5. Percentage{
  6. Properties:Propertiesvalue;
  7. }
  8. 100%{
  9. Properties:Propertiesvalue;
  10. }
  11. }



2、animation-name——定义动画的名称

animation-name: none | “动画的名称”;


(1)动画的名称是由Keyframes创建的动画名，这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果
(2)none为默认值，当值为none时，将没有任何动画效果

3、animation-duration

animation-duration: time (s)


animation-duration是指定元素播放动画所持续的时间，取值为数值，单位为秒(s)，其默认值为“0”。

4、animation-timing-function

animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)


animation-timing-function是用来指定动画的播放方式，具有以下六种变换方式：ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

5、animation-delay

animation-delay: time(s)


animation-delay:是用来指定元素动画开始时间。取值为数值，单位为秒(s)，其默认值为“0”。这个属性和animation-duration使用方法是一样的。

6、animation-iteration-count

animation-iteration-count:infinite || number

animation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。

7、animation-direction

animation-direction: normal || alternate

animation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。

8、animation-play-state

animation-play-state:running || paused


animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused，其中running为默认值。这个属性目前很少内核支持，所以只是稍微提一下。

二、animation事件接口
其实目前基本的就是三个事件而已：开始、迭代、结束。开始和结束都知道是什么意思。至于这个迭代，由于animation中有个iteration-count属性，它可以定义动画重复的次数，因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的，他们只会触发一次，而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。
　　这三个事件的标准名称是：
　　　　开始：animationstart
　　　　迭代：animationiteration
　　　　结束：animationend
　　但是目前版本的Chrome需要加上webkit前缀，而且还要注意大小写
　　　　开始：webkitAnimationStart
　　　　迭代：webkitAnimationIteration
　　　　结束：webkitAnimationEnd
　　最后是实例代码和截图

CSS Code复制内容到剪贴板
  1. <style>
  2. @-webkit-keyframestest{
  3. 0%{background:red;}
  4. 25%{background:green;}
  5. 50%{background:blue;}
  6. 100%{background:red;}
  7. }
  8. @keyframestest{
  9. 0%{background:red;}
  10. 25%{background:green;}
  11. 50%{background:blue;}
  12. 100%{background:red;}
  13. }
  14. </style>
  15. <script>
  16. onload=function(){
  17. varhtml=document.documentElement;
  18. //定义事件回调函数
  19. varstart=function(){
  20. console.log("start");
  21. },iteration=function(e){
  22. console.log(e);
  23. },end=function(){
  24. console.log("end");
  25. };
  26. //绑定事件
  27. html.addEventListener("webkitAnimationIteration",iteration);
  28. html.addEventListener("animationiteration",iteration);
  29. html.addEventListener("webkitAnimationStart",start);
  30. html.addEventListener("animationstart",start);
  31. html.addEventListener("webkitAnimationEnd",end);
  32. html.addEventListener("animationend",end);
  33. //开始执行动画
  34. html.style.animation=
  35. html.style.WebkitAnimation=
  36. "test1slinear0s3";
  37. };
  38. </script>

以上就是CSS的animation属性如何使用实例讲解。“日事日毕，日清日高”的OEC管理模式，其含义是全方位地对每个人、每一天所做的每件事进行控制和清理，做到“日清日毕，日清日高”，每天的工作每天完成，而且每天的工作质量都有一点儿（1%）的提高。（日事日毕，解决基础管理问题；日清日高，解决速度问题）。更多关于CSS的animation属性如何使用实例讲解请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例