CSS3 过渡 转换 动画 属性使用

CSS3为我们带了众多新功能，以前需要js才能做的工作，css3很多都能做，比如点击或者移入鼠标样式变化可以使用伪类操作，动画效果过渡也被加入到CSS3掌握了这些属性可以很好的实现一些功能，尤其是移动端，兼容性也很好，无须再写js。下面介绍过渡transition，转换transform和动画animation属性。

转换transform可以改变元素的角度旋转偏移等，过渡transition让某一属性在一定时间内产生变化，而动画animation功能更加强大，能够连续得产生动画效果。下面给出介绍源码。

HTML部分

<div class="container">
    <div>Hello</div>
</div>

CSS部分

*{margin: 0;padding: 0;}
.container{
    padding: 10% 50%;
    background: green;
}
.container>div{
	width:200px;
	height:100px;
	background-color:yellow; 
    /* transform 转换属性 */
	/* 旋转  rotate(角度)*/
    /* transform:rotate(30deg); */
    /* 偏移   translate(x轴，y轴)*/ 
    /* transform: translate(10px,10px); */
    /* 缩放 scale(宽度倍数，高度倍数) */
    /* transform: scale(2,2); */

    /* transition 过渡 */
    /* 1.必须指定 属性和时间 */
    /* 指定的CSS属性的值更改时 发生变化  需要再触发该属性变化*/
    /* 完整 transition: 指定变化的属性 持续时间 变化曲线 延迟时间; */
    /* transition: width 2s; */

    /* animation 动画 */
    /* 1.动画定义   @keyframes 定 义动画名 和规则   注意不是定义在某个元素选择器内*/
    /* 2.动画调用   animation: 动画名称 时间; */  
    animation:myanima 10s;
    animation-iteration-count:infinite; /*无限d动画*/
}
/* 定义了一个名叫 myanima 的背景色从 yellow -> red -> green -> gray -> black  定义会被提前 */ 
@keyframes myanima{
    0% {background:yellow}
    25% {background:red}
    50% {background:green}
    75% {background:gray}
    100% {background:black}
}
.container>div:hover{
    width:300px;
}