animation属性介绍及纯css实现轮播图和动态流程

最新推荐文章于 2024-04-18 10:56:23 发布

@deer

最新推荐文章于 2024-04-18 10:56:23 发布

阅读量813

点赞数 1

分类专栏： css 文章标签： css 轮播图

本文链接：https://blog.csdn.net/weixin_44218559/article/details/103126735

版权

简介

animation是css3的新属性，不兼容ie9及之前版本，这是一个简写属性，用于设置六个动画属性

div
{
   
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

1.animation-name：
规定需要绑定要选择器的keyframe名称
2.animation-duraton：
规定完成动画所花费的时间，以秒或毫秒计
需要规定值，默认值是0，意味着没有动画效果
3.animation-timing-function：
规定动画的速度曲线
linear，动画从头到尾的速度是相同的，ease，默认，动画以低速开始，然后加快，在结束前变慢，ease-in，动画以低速开始，ease-out，动画以低速结束，ease-in-out，动画以低速开始和结束，
4.animation-delay：
规定动画开始之前的延迟
可选，默认值是0
5.animation-iteration-count：
规定动画应该播放的次数
n，定义动画播放n次，infinite，规定动画无限次播放
6.animation-direction：
规定是否应该轮流反向播放动画
normal，默认值，动画应该正常播放， reverse，反向播放，alternate ，在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
，alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

css实现轮播效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>轮播</title>
  <style>
    .carousel {
   
      width: 100</