5.3d 动画（2）

最新推荐文章于 2023-03-13 14:39:38 发布

吃不到的花生仁

最新推荐文章于 2023-03-13 14:39:38 发布

阅读量446

点赞数

分类专栏： css

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

动画属性：

animation-delay 定义动画开始的时间。
animation-direction 将动画设置为在备用循环中反向播放。
animation-duration 定义动画完成一个循环所需的时间长度。
animation-iteration-count 定义动画循环在停止之前应播放的次数。
animation-name 指定@keyframes 规则的名称。
animation-play-state 确定动画是在运行还是暂停。默认为“running”
animation-timing-function 描述动画在一个周期内的进展情况。
animation-fill-mode 指定CSS动画在执行之前和之后应如何将样
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性

animation:动画名称动画时间运动曲线开始时间播放次数是否反方向

animation:name    duration timing-function delay   iteration-count direction;

timing-function

delay

iteration-count

direction

参考：http://www.w3school.com.cn/cssref/pr_animation-direction.asp

/**demo1********************************************************************/

/**demo2********************************************************************/

轮播图

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>

       .lunbo {
width:9999px;
animation:watchs 8S infinite 2s running;
}
@keyframes watchs {
           0% {
       transform:translateX(0px);
       }
       5% {
       transform:translateX(-1200px);
       }
       25% {
       transform:translateX(-1200px);
       }
       30% {
       transform:translateX(-2400px);
       }
       50% {
       transform:translateX(-2400px);
       }
       55% {
       transform:translateX(-3600px);
       }
       75% {
       transform:translateX(-3600px);
       }
       80% {
       transform:translateX(-4800px);
       }
       100% {
       transform:translateX(-4800px);
       }
       }
       .lunbo:hover {
           animation-play-state:paused;/**鼠标悬浮停止滑动**/
           cursor:pointer;
       }

    .biankuang {
width:1200px;
height:300px;
overflow:hidden;
margin:0 auto;
}
.lunboimg {
       float:left;
   width:1200px;
   }
   .biankuang img {
   border-radius:5px;
       width:1200px;
       height:300px;
   }
   </style>
</head>
<body>

</body>
</html>

旋转轮播图

参考：https://www.runoob.com/cssref/css3-pr-transform-style.html

吃不到的花生仁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.3d 动画（2）

动画属性：animation-delay 定义动画开始的时间。 animation-direction 将动画设置为在备用循环中反向播放。 animation-duration 定义动画完成一个循环所需的时间长度。 animation-iteration-count 定义动画循环在停止之前应播放的次数。 animation-name 指定@keyframes 规则的名称。 an...
复制链接

扫一扫

专栏目录