包磊磊的博客

微信------18800171167

关键帧

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  /*@-webkit-keyframes changeColor{
  from{background-color: red;width: 200px;}
  to{background-color: yellow;width: 400px;}
  }*/
  @-webkit-keyframes changeColor{
  10%{margin-left: 20px;}
  /*20%{background: yellow;}
  30%{background: olivedrab;}
  40%{background: pink;}*/
  50%{margin-left: 100px;}
  /*60%{background: chocolate;}*/
  100%{margin-left: 150px;}
  }
   
  #wrap{width: 200px;height:200px;background: red;
  }
  #wrap:hover{
  /*animation: changeColor 3s ease-in-out;*/
  animation-name: changeColor;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  /*animation-iteration-count:动画播放次数,infinite这个值表示一直播放*/
  /*animation-iteration-count: infinite;*/
  /*direction:alternate这个是往返,reverse:从最终状态往初始状态走*/
  /*animation-direction:reverse;*/
  /*fill-mode:决定动画的最终状态:forwards:停在结束的位置,backwards:动画结束后回到初始位置*/
  animation-fill-mode: forwards;
  animation-play-state: paused;
  }
   
  </style>
  </head>
  <body>
  <div id="wrap"></div>
  </body>
  </html>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34629352/article/details/52372274
上一篇时钟 css3
下一篇annimate
想对作者说点什么? 我来说一句

给Mp4视频增加关键帧工具

2016年08月30日 1.78MB 下载

视频关键帧提取

2014年11月29日 4KB 下载

没有更多推荐了,返回首页

关闭
关闭