css动画和动画属性

HGYYR

已于 2023-04-05 15:11:03 修改

阅读量149

点赞数

文章标签： css 动画 css3

于 2023-03-30 14:26:05 首次发布

本文链接：https://blog.csdn.net/HGYYR/article/details/129857028

版权

动画

1、动画基础

1、动画是css中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的    动画效果。相比较过渡，动画可以实现更多变化、更多控制、连续自动播放等效果
2、动画的基本使用：
    1 先定义动画
    2  再调用动画

2、动画的基本使用

1、使用keyframes定义动画（类似定义类选择器）
/*使用 @keyframes来定义动画，后面跟着动画名称，然后设置0%是什么样子。100%什么样子*/
   @keyframes trans {
 0%{
    transform: translateX(0px);
 }

 100%{
    transform: translateX(500px) rotate(45deg);
 }
    
}
2、使用动画：首先要调用这个动画，后面跟着动画的名称，然后设置动画的持续时间是多少
           /* 调用动画 */
            animation-name:trans;

            /* 持续时间 */
            animation-duration: 2s;
3、动画序列：0%是动画的开始，100%是动画的完成，这个规则就是动画序列
4、在@keyframs中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
5、动画就是使元素从一种样式变为另一种样式的效果，可以改变任意多的样式任意多的次数
6、使用from和to等价于0和100%
7、可以做多个状态的变化，里面的百分比必须是整数。百分比就是总的时间的划分

3、动画常用属性

1.animation-name:指定要对当前元素生效的关键帧的名字

2.animation-duration:指定动画的执行时间

3.animation-timing-function:跟transition-timing-function用法一样

4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）

5.animation-direction:指定动画运行的方向
   normal 默认值 从from向to运行 每次都是这样
   reverse 从 to 向 from 运行 每次都是这样
   alternate 从 from 向 to 运行 重复执行动画时反向执行
   alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行

6. animation-play-state:设置动画的执行状态
  可选值:
   running 默认值 动画执行
   paused 动画暂停

7.animation-fill-mode:指定动画的填充模式
  可选值:
   none 默认值 动画执行完毕元素回到原来位置
   forwards 动画执行完毕元素会停止在动画结束的位置
   backwards 动画延时等待时，元素就会处于开始位置
   both 结合了 forwards 和 backwards

8.animation-delay:设置动画的延时

9.transition:可以同时设置动画相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。

在这里插入图片描述

            /* 规定动画的速度曲线，默认是ease */
            animation-timing-function: ease-out;
            /* 设置何时开始 */
            animation-delay: 2s;
            /* 循环播放infinite:无限循环 */
            animation-iteration-count:infinite ;
            /* 是否反方向播放 alternate反方向:*/
            animation-direction: alternate;

4、跳动的爱心代码

<!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>设置动画效果</title>
    <style>
 @keyframes trans{
    0%{
        transform: scale(0.5,0.5);
    }
    15%{
        transform: scale(1,1);
    }
    30%{
        transform: scale(0.5,0.5);
    }
    45%{
        transform: scale(1,1);
    }
    60%{
        transform: scale(0.5,0.5);
    }
    75%{
        transform: scale(1,1);
    }
    90%{
        transform: scale(0.5,0.5);
    }
    100%{
        transform: scale(1,1);
    }
 }


        div{
            width: 400px;
            height: 400px;
            background: url(../img/爱心2.png);
            background-position: center;
            animation-name: trans;
            animation-duration: 10s;
            animation-iteration-count: infinite
        }
    </style>
</head>
<body>
 <div></div>
</body>
</html>

5、旋转方块代码(动画属性)

<!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>动画的常用属性</title>
    <style>
        @keyframes trans {
            from {
                transform: translate(0, 0) scale(1, 1) rotate(90deg);
            }

            to {
                transform: translate(200px, 200px) scale(2, 2) rotate(180deg)
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: red;
            animation-name: trans;
            animation-duration: 5s;
            /* 规定动画的速度曲线，默认是ease */
            animation-timing-function: ease-out;
            /* 设置何时开始 */
            animation-delay: 2s;
            /* 循环播放infinite:无限循环 */
            animation-iteration-count:infinite ;
            /* 是否反方向播放 alternate反方向:*/
            animation-direction: alternate;
        
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6、走路的雪人

<!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>
        .box1{
            background-image: url(../img/精灵图.jpg);
            height:180px;
            width: 123px;
            margin: 0 auto;
            animation-name: run;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(4);
           
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -487px 0;
            }
                
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>