css3动画，transition和animation的区别，及实现旋转图片（transform: rotate）

1transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}
div:hover
{
    width:300px;
}
</style>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

2animation作用为制作动画

@keyframes作用

<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
</style>

<div></div>

3transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

<style> 
div
{
    width:200px;
    height:100px;
    background-color:yellow;
    transform:rotate(7deg);
}
</style>

<div>Hello</div>