css3动画的复习

css3动画属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
      div{
          
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation-name:myfirst; //动画名字，对应下面的@keyframe
        animation-duration:5s;  //动画完成一个周期的时间
        animation-timing-function:linear; //动画的曲线
        animation-delay:2s;   // 动画开始时间，默认为0
        animation-iteration-count:infinite; //动画的播放次数，默认为1
        animation-direction:alternate;  //动画 逆向播放，默认为normal，则不逆向播放
        animation-play-state:running;  //动画的运行和停止：paused
        /* Safari and Chrome: */
        /*-webkit-animation-name:myfirst;
        -webkit-animation-duration:5s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:2s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
        -webkit-animation-play-state:running;*/
      }

      @keyframes myfirst
      {
          0%  {background-color: red;left: 0;top: 0}
          25% {background-color: yellow;left: 200px;top:0;}
          50% {background-color: blue;left: 200px;top: 200px}
          75% {background-color: green;left: 0;top: 200px}
          100% {background-color: red;left: 0;top: 0}
      }
    </style>
</head>
<body>
  <p><b>注意</b>该动画在ie9以及更早版本是无效的</p>    
  <div></div>
</body>
</html>

可以直接赋值代码在浏览器中查看效果。

 

与上面的动画相同，但是使用了简写的动画 animation 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation:myfirst 5s linear 2s infinite alternate;
    /* Safari and Chrome: */
    -webkit-animation:myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

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

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

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>
View Code

 css3过渡动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

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

 

posted @ 2017-01-21 13:08  raocheng  阅读(84)  评论(0)  编辑  收藏  举报