css动画animation

最新推荐文章于 2024-08-12 11:00:42 发布

蜗牛码农路

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量147

点赞数

文章标签：动画 css css3

本文链接：https://blog.csdn.net/weixin_45052838/article/details/120919740

版权

本文详细介绍了CSS的animation属性，包括animation-name, animation-duration, animation-timing-function等，并通过实例展示了小球往返运动和文字淡入淡出的动画效果，帮助读者理解并掌握CSS动画的使用。

摘要由CSDN通过智能技术生成

animation

animation属性是animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direaction,animation-fill-mode,animation-play-state属性的一个简写属性形式。

animation-name

指定应用的一系列动画，每个名称代表一个有@keyframes定义的动画序列。

1.Single animation

animation-name: test

2.Mutipule animation

animation-name: test1,test2,test3;

3.global values

animation-name: initial;
animation-name: inherit;
animation-name: unset;

animation-duration

指定动画周期的时长

animation-timing-function

定义动画在每一动画周期中执行的节奏，可能的值为一到多个。

1.Keyword values

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

2.Function values
3.Multipule animations
4.Global values

animation-delay

定义动画于何时开始（动画延迟执行之间间隔）

animation-iteration-count

动画在结束前运行的次数
如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

animation-direction

动画是否反响播放

animation-fill-mode

设置css动画爱执行之前和之后如何将样式应用于其目标

1.Single animation

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

2.Mutilpule animation

animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

animation-play-state

定义动画是否运行或暂停
可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

动画示例

往返运动的小球

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 300px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .ball{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: firebrick;
      animation: move linear 3s infinite;
    }
    @keyframes move{
      0%{
        transform: translateX(0px);
      }
      50%{
        transform: translateX(270px);
      }
      100%{
        transform: translateX(0px);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="ball"></div>
  </div>
</body>
</html>

文字淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .txt{
      animation: fadeIn 3s infinite;
    }
    @keyframes fadeIn {
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="txt">文字淡入淡出</div>
</body>
</html>