秦小小樱

导航

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;}
}

 

posted on 2018-07-27 13:39  RonnieQin  阅读(145)  评论(0编辑  收藏  举报