transition、transform、animation三个属性的使用与区别

原文章：http://www.pianshen.com/article/6672108066/

一、transform：改变元素形状

4个属性
1. rotate：围绕中心点旋转 deg 单位
2. translate（x,y）:向 x  y 轴移动位置 px
3. scale：整体缩放 倍数、scaleX  scaleY 沿 轴方向缩放
4. skew(x,y) 切变、scaleX  scaleY  沿轴切变

二、transition：过渡，一个元素从一个形状变换到另一个形状。（需要事件触发）

1. transition-property(none/all/indent)：变换的属性  
2. transition-duration：转换持续时间，单位 s/ms
3. transition-timing-function(ease/liner/ease-in/ease-out/ease-in-out/cubic-bezier)：变换速率
4. transition-delay：转换开始执行的时间，事件触发后多久执行 

transition 连写格式：

连写格式

 transition: property duration animation type delay 

例子:

单个属性property

div{ transition: opacity .35s, transform .35s }

 多个属性property 同时变化，用 "," 逗号隔开 

div1{
 transition: background-color 1s ease 0.1s,
                width 1s linear 0.1s,
                height 1s ease-in-out 0.1s;
}

 

PS：因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器 IE 全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀

transition例子

.transform{
    width: 300px; 
    height: 300px; 
    position: absolute; 
    font-size: 22px;
    color: white;
    background-color: brown; 
    -webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    -o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s; 
    transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
 
}
 
.transform:hover{ 
    background-color: gray; 
    width: 350px; 
    height: 350px;
}

 transition 例子。

结合transform。transform在这里作为transition 的 属性（property）

    
    

    




    
    


        
 319 
        
 布局和界面
        
Read More

    
    

三、animation动画

0. 用 @keyframes 定义动画名 ，以及该名称包含的动画需要变化的属性及内容

1. animation-name:元素绑定动画名（@keyframes定义的动画名）

2. animation-duration：动画持续时间

3. animation-timing-function：动画变换速率

4. animation-delay：开始时间。触发动画后多久开始动画

5. animation-interation-count: 循环播放次数。（infinite 是无限次）

6. animation-direction: 动画运动方向 （normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。 另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”）

7.animation-play-state(running/pause)：动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。)

.animation{
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 22px;
    color: white;
    background-color: brown;
    animation: ccchange 3s ease alternate infinite;
}

@keyframes ccchange {
    0%{
        width: 300px;
        height: 300px;
        background-color: brown;
    }

    40%{
        width: 500px;
        height: 500px;
        background-color: seagreen;
    }

    60%{
        width: 400px;
        height: 400px;
        background-color: coral;
    }

    100%{
    }
}