CSS-动画

最新推荐文章于 2017-10-26 14:38:58 发布

z_Ever1

最新推荐文章于 2017-10-26 14:38:58 发布

阅读量228

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_Ever1/article/details/78353554

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>动画</title>
   <style>
       div{
           margin: 0 auto;
           width: 100px;
           height: 100px;
           background-color: pink;
           animation-name: myName;
           /*动画持续时间*/
           animation-duration:3s;
           /*动画延迟执行*/
           animation-delay:2s;
           /*动画执行顺序*/
           /*animation-direction:reverse;*/
           animation-direction: alternate;
           /*动画执行次数*/
           animation-iteration-count: infinite;
           /*动画的填充在延迟时间内的填充*/
           animation-fill-mode: backwards; /*在延迟时间内使用第一帧填充*/
           /*animation-fill-mode: forwards;*//*在结束之后使用第一帧填充*/
           /*动画执行函数*/
           animation-timing-function: ease-out;
       }
       div:hover{
           animation-play-state: paused;
       }
       @keyframes myName {
           from {
               width: 100px;
               height: 100px;
               background-color: red;
               transform: rotate(0deg);
               transform: translate(0px);
           }
           to {
               width: 300px;
               height: 300px;
               background-color: blue;
               transform: rotate(360deg);
               transform: translate(100px);
           }
           /*0% {
               width: 100px;
               height: 100px;
               background-color: red;
           }
           50%{
               width: 1000px;
               height: 1000px;
               background-color: green;
           }
           100% {
               width: 300px;
               height: 300px;
               background-color: blue;
           }*/
       }
   </style>
</head>
<body>
   <div>

   </div>
</body>
</html>