CSS3的动画效果:transition与animation

CSS3实现动画效果有两种形式:transition和animation。【针对不同的浏览器,前面要加上相应的前缀,如-moz-transition:…】

transition:

  transition:propertyduration timing-function[,property duration timing-function]

也可以分开写:

  transition-property:background-color;transition-duration:1s;transition-timing-function:linear;

property:要变换的css属性名称;
duration:动画时长;
timing-function:过渡效果。

示例代码:

  <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"><title>css3动画-瑞金佬的前端路</title><style type="text/css">div{width:400px;height:200px;line-height:200px;color:#fff;font-size:50px;background:blue;margin:50pxauto;text-align:center;-webkit-transition:background1s linear,-webkit-transform 0.5s linear;-moz-transition:background1s linear,-moz-transform 0.5s linear;-o-transition:background1s linear,-o-transform 0.5s linear;-ms-transition:background1s linear,-ms-transform 0.5s linear;transition:background1s linear,transform 0.5s linear;}div:hover{background:red;-webkit-transform:translate(100px);-moz-transform:translate(100px);-o-transform:translate(100px);-ms-transform:translate(100px);transform:translate(100px);}</style></head>  <body><div>css3 animate</div></body></html>

animation:

1 animation:name duration timing-function;

也可以分开写:

  animation-name:keyframe_name;animation-duration:1s;animation-timing-function:linear;

name:定义的关键帧名字;
duration:动画时长;
timing-function:过渡效果。

示例代码:

 
<!DOCTYPE HTML>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>
            css3动画-瑞金佬的前端路
        </title>
        <style type="text/css">
            div{width:400px;height:200px;line-height:200px;color:white;font-size:50px;background:blue;margin:50pxauto;text-align:center;position:relative;}div:hover{-webkit-animation:animate
            1s linear;-moz-animation:animate 1s linear;-o-animation:animate 1s linear;-ms-animation:animate
            1s linear;animation:animate 1s linear;}@-webkit-keyframes animate {0%,50%,100%{left:0}25%{left:100px;}75%{left:-100px;}}
            @-moz-keyframes animate {0%,50%,100%{left:0}25%{left:100px;}75%{left:-100px;}}
            @-ms-keyframes animate {0%,50%,100%{left:0}25%{left:100px;}75%{left:-100px;}}
            @-o-keyframes animate {0%,50%,100%{left:0}25%{left:100px;}75%{left:-100px;}}
            @keyframes animate {0%,50%,100%{left:0}25%{left:100px;}75%{left:-100px;}}
        </style>
    </head>
    
    <body>
        <div>
            css3 animate
        </div>
    </body>
 
</html>

注意上面定义的关键帧内百分数是用来指定动画执行到该进度时的属性值。

animation功能与transition都能通过改变css的属性值来实现动画效果,他们的不同之处是:transition只能指定属性的开始值和结束值来达到渐变,不能像animation那样定义关键帧来实现比较复杂的动画效果。

另外推荐个animate.css,里面定义了一套动画效果。

 

 

相关内容

 
© 2001-2017 MYSZIIT.COM. All Rights Reserved.