您现在的位置是：网站首页> 编程资料编程资料

CSS的animation属性使用实例讲解CSS3中Animation属性的使用详解深入探究CSS中Animations和Transitions的工作原理CSS3的transition和animation的用法实例介绍

2021-09-05 958人已围观

简介 这篇文章主要介绍了CSS的animation属性使用实例讲解,是CSS入门学习中的基础知识,需要的朋友可以参考下

一、animation的语法
 
1、@keyframes——插入关键帧
 
(1)FormTo形式：

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

 
 
(2)百分比的形式：
 

CSS Code复制内容到剪贴板
  1. @keyframes demo {   
  2.       0% {   
  3.          Properties:Properties value;   
  4.       }   
  5.       Percentage {   
  6.          Properties:Properties value;   
  7.       }   
  8.       100% {   
  9.          Properties:Properties value;   
  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.   
  2.   

上一篇：使用CSS3配合IE滤镜实现渐变和投影的效果IE滤镜与CSS3效果(详细整理分享)

下一篇：CSS中的zoom属性和scale属性的用法及区别详解CSS中zoom属性或overflow:auto属性清除浮动的作用IE浏览器专有css属性之zoom详解CSS中不为人知Zoom属性的使用介绍(IE私有属性)css中zoom:1属性的定义和作用

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网