CSS 动画

最新推荐文章于 2022-09-21 18:37:53 发布

「已注销」

最新推荐文章于 2022-09-21 18:37:53 发布

阅读量172

点赞数 2

分类专栏： # H5C3 文章标签： css3 html

本文链接：https://blog.csdn.net/Ares5kong/article/details/116234475

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本文介绍了如何使用CSS定义和调用动画。首先，通过@keyframes定义了一个名为action的动画，该动画将元素旋转360度，分为三个步骤。接着，展示了如何通过animation属性在元素上应用这个动画，包括设置动画时长、迭代次数和方向。最后，提供了一个实际例子，创建了一个名为clock的动画，元素在2秒内旋转360度，无限次循环且正序倒序交替执行。

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

步骤:

1. 定义

2. 调用

1. 定义动画

语法:

@keyframes 自定义动画名 {

   步长1{
       样式
   }

   步长2{
       样式
   }

   步长n{
       样式
   }

}

语法解释：

语法不是很复杂, 就是通过@keyframes关键字给将要定义的动画起一个名字，然后指定步长和每步要做的事情。

比如想定义一个名字为 action 的动画, 然后预想动画分三个步骤执行, 每步中想让元素旋转180°，就可以写成如下代码:

@keyframes action{
0%{
transform: rotate(0);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}

2. 调用动画

语法：

序号	属性	取值	描述
1	animation-name	@keyframes指定的名字	调用动画的名字
2	animation-duration	数值 + 单位(s/ms)	动画在多久完成一次
3	animation-timing-function	linear、ease等	动画过渡时的样式
4	animation-delay	数值 + 单位(s/ms)	动画延迟多久执行
5	animation-iteration-count	数值或 infinite(无限循环)	动画执行次数
6	animation-direction	alternate(正序倒序交替)、reverse(倒序)	动画播放顺序
7	animation-play-state	stop(暂停)	动画暂停与开始
8	animation	animation: #1 #2 #3 #4 #5 #6	简写, 注意要按照序号顺序

语法解释：

(1) 红色部分的属性是必须的, 不能省略, 也是执行一个动画最基本的两个属性。

(2) 谁要调用动画, 就把 animation 属性写在它的CSS中。

比如 id 为 call 的元素想要调用名字为 action 的动画并要求动画每次要在5秒内执行完成, 可以写如下代码:

#call{

animation: clock 5s;

}

简单演示

需求:

(1) 定义一个名字为 action 的动画

(2) 动画内容是将元素旋转一圈, 动画总共分成五步执行, 每步旋转90°

(3) 动画无限循环执行, 并且让动画正序倒序交替执行

(4) div 调用该动画

效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS动画</title>
  <style>
    div {
      position: relative;
      margin-top: 300px;
      margin-left: 300px;
      width: 5px;
      height: 100px;
      background-color: #000;
      transform-origin: 50% 0;
      animation: clock 2s linear 0s infinite alternate;
    }

    @keyframes clock {
      0% {
        transform: rotate(0);
      }
      25% {
        transform: rotate(90deg);
      }
      50% {
        transform: rotate(180deg);
      }
      75% {
        transform: rotate(270deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>