CSS3 2D转换 动画

transform：translate（x,y）；

过度  鼠标悬浮 在2s内完成所有变化

div
{
    width:100px;
    height:100px;
    background:red;
    transition: 2s;   
    -webkit-transition: 2s; /* Safari */
}

div:hover
{
    width:300px;
    height:200px;
}

 

 

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;   //名称  时长
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}