css动画定义

CSS3@Keyframes规则
@Keyframes规则用于创建动画
 
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
 
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
 1.规定动画的名称
 2.规定动画的时长
 
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
 
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
 
animation: name duration timing-function delay  iteration-count  direction;
 
1.animation-name                      规定需要绑定到选择器的 keyframe 名称。
 
2.animation-duration                 规定完成动画所花费的时间，以秒或毫秒计。
 
3.animation-timing-function      规定动画的速度曲线。
 
animation-timing-function: value;
          linear            动画从头到尾的速度是相同的。    
           ease            默认。动画以低速开始，然后加快，在结束前变慢。    
           ease-in            动画以低速开始。    
           ease-out    动画以低速结束。    
           ease-in-out    动画以低速开始和结束。    
           cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
 
4.animation-delay                       规定在动画开始之前的延迟。
animation-delay 属性定义动画何时开始。
animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
 
 
5.animation-iteration-count       规定动画应该播放的次数。
animation-iteration-count: n|infinite;
n            定义动画播放次数的数值。    
infinite    规定动画应该无限次播放。
 
6.animation-direction                 规定是否应该轮流反向播放动画。
animation-direction: normal|alternate;
normal    默认值。动画应该正常播放。    
alternate    动画应该轮流反向播放。
 
 
兼容不同浏览器 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3旋转动画</title>
<style>
div{
    width: 200px;
    height: 200px;
    background: yellow;
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    animation:3s linear 0s myrotate;
    -webkit-animation:3s linear 0s myrotate;/* Safari and Chrome */
    animation-fill-mode:forwards;/*动画播放完毕时停止，不回到初始状态*/
    -webkit-animation-fill-mode:forwards;    
    animation-direction : alternate;
    animation-delay: -2s;
}
@keyframes myrotate{
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
@-webkit-keyframes myrotate{/* Safari and Chrome */
    form {transform:rotateY(0deg);}    
    to    {transform:rotateY(180deg);}
}
/*第一个时间代表完成一次运动所消耗的时间，第二个时间代表动画于多少时间后开始播放*/
/*linear代表线性运动（匀速运动）；infinite为无限运动（一直运动）*/
</style>

</head>
<body>
<div>3D旋转</div>
<script type="text/javascript">

</script>
</body>
</html>

 

posted @ 2018-06-26 10:10  quitpoison  阅读(115)  评论(0)  编辑  收藏  举报