CSS的使用（六）——动画animations

小羊...

已于 2024-07-10 10:55:23 修改

阅读量322

点赞数 4

文章标签： css 前端

于 2024-07-09 17:42:26 首次发布

本文链接：https://blog.csdn.net/L_sheep_/article/details/140301707

版权

动画animations和过渡transition的主要区别是：动画不用鼠标移入来触发，而过渡需要人为触发才能执行。使用时的区别不是很大，我们这里不做太多的解释。

一、创建动画

在使用动画前，需要先在style中用@keyframes创建一个动画，有两种方式：第一种为使用from+to完成动画的设置，第二种为使用0%-100%分别为每个关键帧设置精细的样式。

我们也可以通过引入animate.css库，使用已经定义好的简单动画效果。

        /* 创建一个名为leftToRight的动画 */
        @keyframes leftToRight{
            from{
                margin-left: 0;
            }
            to{
                margin-left: 400px;
            }
            /* 0%{
                margin-left: 0;
            }
            25%{
                margin-left: 100px;
            }
            50%{
                margin-left: 200px;
            }
            75%{
                margin-left: 300px;
            }
            100%{
                margin-left: 400px;
            } */
        }

二、调用动画

animation-name：调用自己创建的动画。

animation-duration：动画的持续时间。

animation-timing-function：动画的时间曲线。属性值的取值可以参考“CSS的使用（五）”。

animation-delay：动画的延迟时间。

animation-iteration-count：动画的播放次数。可以是一个具体的次数，也可以是无限次播放infinite。

animation-direction：动画的播放形式。属性值有：normal执行一次之后回到起点继续执行下⼀次（默认）， alternate往返动画，reverse反向动画。

animation-fill-mode：动画不播放时（没有开始或播放结束时）的元素位置。属性值有：none不做任何改变；forwards让元素结束状态保持动画最后⼀帧的样式；backwards让元素等待状态的时候显示动画第⼀帧的样式；both让元素等待状态显示动画第⼀帧的样式，结束状态保持动画最后⼀帧的样式。

animation：动画的简写格式“animation: name duration timing-function delay iteration-count direction fill-mode;”。

animation-play-state：动画的暂停与执行。属性值有：running执行动画，paused暂停动画。该属性需要有触发才会执行，因此不能和其余属性一起简写。

        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 需要使用对应的属性来进行动画声明 */
            animation-name: leftToRight;
            /* 动画的持续时间 */
            animation-duration: 3s;
            /* 动画时间曲线 */
            animation-timing-function: linear;
            /* 动画的延迟执行 */
            animation-delay: 0s;
            /* 动画的播放次数 */
            animation-iteration-count: 5;
            /* 是否轮流、往返执行 */
            animation-direction: alternate;
            /* 动画结束时元素的效果 */
            animation-fill-mode: both;
            /* 简写形式 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: leftToRight 3s linear 0s 5 alternate both;  */
        }
        .div1:hover{
            /* 在鼠标移入时动画暂停 */
            animation-play-state: paused;
        }

三、2D与3D转换

transform属性可以用于2D和3D的转换。

旋转：transform:rotate(45deg); 其中deg是单位, 代表多少度。

缩放：transform:scale(1.5);放大到原来的1.5倍。

平移：transform:translate(100px, 0px);两个参数分别是水平、垂直方向。

旋转轴向：transform:rotateZ(45deg); 围绕z轴旋转（默认），x与y轴就是把rotate后的字母换成对应的轴向即可。

透视效果：perspective可以实现近大远小的效果，在父元素添加该属性，子元素实现对应的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            height: 500px;
            border: 1px solid;
            margin: 40px auto;
            /* 实现透视效果 */
            perspective: 400px;
        }
        ul li{
            width: 100px;
            height: 100px;
            background-color: red;
            color: aliceblue;
            margin: 50px auto;
        }
        ul li:nth-child(1){
            /* 旋转 */
            /* Y轴旋转角度单位deg */
            transform: rotateY(45deg);
        }
        ul li:nth-child(2){
            /* 平移 */
            transform: translate(100px,100px);
        }
        ul li:nth-child(3){
            /* 形变 */
            transform: scale(0.5);
        }
    </style>
</head>
<body>
    <ul>
        <li>旋转</li>
        <li>平移</li>
        <li>形变</li>
    </ul>
</body>
</html>

形变的中心点：transform-origin: 200px 0px;两个参数分别是水平、垂直方向；参数值可以是像素、百分比和特殊关键字。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    ul {
      width: 200px;
      height: 200px;
      border: 1px solid;
      margin: 40px auto;
      position: relative;
    }

    ul li {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      /* 形变中心点 */
      transform-origin: bottom center;
    }

    ul li:nth-child(1) {
      background-color: red;
      transform: rotate(45deg);
    }

    ul li:nth-child(2) {
      background-color: blue;
      transform: rotate(60deg);
    }

    ul li:nth-child(3) {
      background-color: green;
      transform: rotate(90deg);
    }
  </style>
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

</html>