css动画篇——@keyframes用法

最新推荐文章于 2024-04-20 00:00:00 发布

dichen0168

最新推荐文章于 2024-04-20 00:00:00 发布

阅读量487

点赞数

原文链接：http://www.cnblogs.com/missmissmiss/p/8747499.html

版权

语法

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes 后面跟上自定义的动画名字，意思就是声明一种css规则，规则内部写上动画对应的变化过程，动画会循环播放。示例：

<!DOCTYPE html>
<html>
<head>
  <title>动画</title>
  <style type="text/css">
  @keyframes move_down{
    from{top:0px;}
    to{top:200px;}
  }
    div{
      width: 200px;
      margin:0 auto;
    }
    img{
      width: 300px;
      position: relative;
      animation:move_down 3s infinite;
    }
  </style>
</head>
<body>
  <div>
    <img src="http://pic15.nipic.com/20110802/7952036_150022311128_2.jpg">
  </div>
</body>
</html>

 @keyframes move_down{   定义动画名称为move_down
    from{top:0px;}     从top值0 到 top值200，还有其他表示方法，目的是一样的。
    to{top:200px;}
  }

animation:move_down 3s infinite; 第一个参数是自己设定的变化规则，然后是执行一次的时间，最后是动画速度曲线。
animation提供了多个值，上面只是用了三个，完整语法是这样的：


详细的直接去这里看http://www.w3school.com.cn/cssref/pr_animation.asp

转载于:https://www.cnblogs.com/missmissmiss/p/8747499.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dichen0168

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画篇——@keyframes用法

语法@keyframes animationname {keyframes-selector {css-styles;}}@keyframes 后面跟上自定义的动画名字，意思就是声明一种css规则，规则内部写上动画对应的变化过程，动画会循环播放。示例：<!DOCTYPE html><html><head> <...
复制链接

扫一扫