转载

30分钟玩转css3动画， transition，animation

其实css3动画是就是2种实现，一种是transition，另一种就是animation。transition实现的话就是只能定制开始帧，和结束2帧；而animation实现的话可以写很多关键帧。
没有前戏，直进主题。

transition

包含4个值，例如：

-webkit-transition:all .5s ease 1s;

分别顺序是(m代表必须)：

。

来个小demo：

<!DOCTYPE html> <html> <head>  <title></title>  <meta charset="utf-8">  <style>   .transition {    width:30px;    height: 30px;    line-height: 30px;    border-radius: 50%;    text-align: center;    display: inline-block;    background:lightblue;    -webkit-transition:all .5s ease;    transition:all .5s ease;    color:#fff;   }   .transition:hover {    -webkit-transform:rotate(360deg);    transform:rotate(360deg);   }  </style> </head> <body>  <div class="transition">×</div> </body> </html>

应用例子：

http://skyweaver213.github.io/slide/widget/slide2/slide.html

http://skyweaver213.github.io/slide/widget/slide3/slide.html

animation：

就是一个动画对应一个keyframes，然后一个keyframes 里可以有N多个关键帧。

例如一个keyframes里我们可以这样写：

@-webkit-keyframes go {     0%, 100% {         -webkit-transform: translateX(0);     }     50% {         -webkit-transform: translateX(500px);     } }

然后我们需要在应用这个keyframes的元素上写一个animation,

例如： -webkit-animation:go 2.5s ease infinite 0;

参数顺序分别是(m代表必须)：

动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间

小demo：

<!DOCTYPE html> <html> <head>  <title></title>  <style>   .animation {    width: 100px;    height: 100px;    display: block;    background: pink;    -webkit-animation: go 2.5s infinite;    /*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/   }   @-webkit-keyframes go {    0%, 100% {     -webkit-transform: translateX(0);    }    50% {     -webkit-transform: translateX(500px);    }   }  </style> </head> <body> <div class="animation"></div> </body> </html>

应用deom：loading状态、三条线变箭头。

http://skyweaver213.github.io/slide/widget/slide1/slide.html

<!DOCTYPE html> <html> <head>  <title></title>  <style>   .loading {    position: relative;    width: 40px;    height: 40px;    margin: 40px auto;    -webkit-transform:rotate(165deg);   }   .loading:before, .loading:after {    content: '';    position: absolute;    width: 8px;    height: 8px;    top: 50%;    left: 50%;    display: inline-block;    border-radius: 4px;    -webkit-transform: translate(-50%, -50%);   }   .loading:before {    -webkit-animation:before 2s infinite;   }   .loading:after {    -webkit-animation:after 2s infinite;   }   @-webkit-keyframes before {    0% {     width: 8px;     box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);    }    35% {     width: 40px;     box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);    }    70% {     width: 8px;     box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);    }    100% {     box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);    }   }   @-webkit-keyframes after {    0% {     height: 8px;     box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);    }    35% {     height: 40px;     box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);    }    70% {     height: 8px;     box-shadow:  8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);    }    100% {     box-shadow:  8px 16px rgba(61, 184, 143, 0.75),  -8px -16px rgba(233, 169, 32, 0.75);    }   }  </style> </head> <body>  <div class="loading"></div> </body> </html>

变换成箭头：

<!DOCTYPE html> <html> <head>  <title></title>  <style>   * {    margin:0;    padding:0;   }   .arrow_div {    width: 100px;    height: 100px;    background: #000;    position: relative;   }   .arrow {    width: 33px;    height: 4px;    display: inline-block;    background: #fff;    position: absolute;    left:0;    right:0;   }   .arrow_body {    margin: auto;    top:40px;    -webkit-animation: 2s linear body_kf infinite;   }   @-webkit-keyframes body_kf {    0% {    }    30%, 50% {     -webkit-transform: rotate(180deg);    }    80%, 100% {     -webkit-transform: rotate(360deg);    }   }   .sleft {    width: 33px;    height: 33px;    border: transparent;    position: absolute;    top: 25px;    margin: 0 auto;    left: 0;    right: 0;    -webkit-animation: 2s linear sleft_kf infinite;   }   .sleft:before {    content: '';    width: 33px;    height: 4px;    display: inline-block;    background: #fff;    top: 0;    position: absolute;    -webkit-animation: 2s linear sleft_before_kf infinite;   }   @-webkit-keyframes sleft_kf {    0% {}    30%, 50% {     -webkit-transform: rotate(222deg);    }    80%,100% {     -webkit-transform: rotate(360deg);    }   }   @-webkit-keyframes sleft_before_kf {    0%, 100%{}    20% {     width: 28px;     top: 1px;     left: 3px;    }    25% {     width: 26px;     top: 2px;     left: 6px;    }    30%, 40%, 50% {     width: 22px;     top: 3px;     left: 8px;    }    80% {     width: 33px;     top:0;     left:0;    }   }   .sright {    width: 33px;    height: 33px;    border: transparent;    position: absolute;    margin: 0 auto;    left: 0;    right: 0;    top: 25px;    position: absolute;    -webkit-animation: 2s linear sright_kf infinite;   }   .sright:before {    content: '';    width: 33px;    height: 4px;    display: inline-block;    background: #fff;    bottom: 0;    position: absolute;    -webkit-animation: 2s linear sright_before_kf infinite;   }   @-webkit-keyframes sright_kf {    0% {}    30%, 50% {     -webkit-transform: rotate(135deg);    }    80%,100% {     -webkit-transform: rotate(360deg);    }   }   @-webkit-keyframes sright_before_kf {    0%,100% {}    20% {     width: 28px;     bottom: 1px;     right: 1px;    }    25% {     width: 25px;     bottom: 2px;     right: 2px;    }    30%, 40%, 50% {     width: 22px;     bottom: 3px;     right: 3px;    }    80% {     width: 33px;     bottom: 0;     right:0;    }   }  </style> </head> <body>  <div class="arrow_div">   <div class="sleft"></div>   <i class="arrow arrow_body"></i>   <div class="sright"></div>  </div> </body> </html>