简述css3动画

    简单讲一讲CSS3的动画属性，transition，transform和animation

    

  一、transition 过渡

transition 是一个简写属性，可扩展为

1.transition-property属性，设置过渡效果的属性名称

  值可为：none（没有属性有效果）|| all（所有属性有效果）|| property（自定义属性名称）

2.transition-duration属性，设置效果持续时间

3.transition-timing-function属性，设置效果的速度曲线

 

  值可为：

  linear，线性效果

  ease-in，先慢后快

  ease-out，先快后慢

  ease-in-out，先慢后快再慢

  cubic-bezier（n，n，n，n），某种速度函数

4.transition-delay属性，设置延迟执行效果的时间

 

  二、transform 变换

常见取值分为四块，

  translate类（偏移）

  scale类（放大缩小）

  rotate类（旋转）

  skew类（拉伸） 

与之相关有一个属性，transform-origin，允许你改变被转换元素的属性

 

transition 常与 transform 组合使用，例子

.image {  
    -webkit-transition: all 1s ease-in-out;  
    -moz-transition: all 1s ease-in-out;  
    -o-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out;  
    cursor:pointer;  
}  
.image_top {  
    position: absolute;  
    -webkit-transform: scale(0, 0);  
    opacity: 0;  
    filter: Alpha(opacity=0);  
}  
.box:hover .image_bottom{  
    -webkit-transform: scale(0, 0);  
    -webkit-transform-origin: bottom left;  
}  

 

让div拥有名为box的class属性，里面图片拥有名为image和image_bottom的class属性，则鼠标移至该div，该图片会向左下角缩小，并且透明，最后消失，鼠标移走，图片有会反向复原（向右上角放大，逐渐显现）

 

注意：这里ie低版本不支持opacity所以用filter兼容（ie你懂得）

 

  三、animation 动画

animation 也是一个简述属性，可拓展为

1.animation-name需要绑定到选择器keyframe的名字

2.animation-duration，动画时间

3.animation-timing-function，动画速度曲线，所填值与transition的该属性相同

4.animation-delay，动画延迟执行

5.animation-iteration-count，动画播放次数，值可为 n（次数）|| infinite（无限次）

6.animation-direction，是否反向播放，值为 normal（默认，正常播放）|| alternate（反向播放）

 

与之相关的有@keyframe属性，简单例子

.animation{   
    animation:mymove 5s infinite;  
    -webkit-animation:mymove 5s infinite;   
}  
@keyframes mymove  
{  
  0%   {top:0px;}  
  25%  {top:200px;}  
  50%  {top:100px;}  
  75%  {top:200px;}  
  100% {top:0px;}  
}