动画的属性

最新推荐文章于 2024-05-31 14:44:29 发布

洋洋阳@

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量323

点赞数

分类专栏： html/css 文章标签： css3 css html 3d 动画

本文链接：https://blog.csdn.net/m0_51607474/article/details/121618159

版权

html/css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

animation

1. animation-name 动画名称

2.animation-duration 动画持续时间

3.animation-timing-function 动画的速度曲线

linear 动画从头到尾的速度是相同的。

ease 默认值。动画以低速开始，然后加快，在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

4.animation-delay 动画延迟时间

5.animation-iteration-count 动画循环播放的次数

infinite 无限次

6.animation -direction 动画是否反向运动

normal 正常方向

reverse 反方向

alternate 往返运动

alternate-reverse alternate的反方向运动

7.复合写法

animation: name duration timing-function delay iteration-count direction ;

8 举例

<!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>
        .wrap{
            width: 500px;
            height: 500px;
            background: pink;
        }
        .box{
            width: 100px;
            height: 100px;
            background: yellow;
            /* animation: name duration timing-function delay iteration-count direction ; */
            /* 1.动画的名字 */
            animation-name:move ;
            
            /* 2.动画加载的时间 可以为s，ms */
            animation-duration: 1s;

            /* 3.动画的速度曲线
                （1）linear 动画从头到尾的速度是相同的。
                （2）ease 默认值。动画以低速开始，然后加快，在结束前变慢。
                （3）ease-in 动画以低速开始。
                （4）ease-out 动画以低速结束。
                （5）ease-in-out 动画以低速开始和结束。
            */
            animation-timing-function: ease-in-out;

            /* 4.动画加载的延时
                可以为负值
                正值就是等待多少时间后开始加载
                负值 跳到当前秒数开始接下来的运动
            */
            animation-delay:-0.5s ;
            /* 5.动画加载的次数
                可以为数字
                无限次 infinite
            */
            animation-iteration-count:2 ;
            animation-iteration-count:infinite ;

            /* 6.动画运动的方向
                normal 正常的 0-100 0-100
                reverse 反方向运动 100-0 100-0 100-0
                alternate  往返运动 0-100 100-0 0-100...
                alternate-reverse 100-0 0-100 100-0...

            */
            animation-direction: normal;
            animation-direction: alternate;
            animation-direction: reverse;
            animation-direction: alternate-reverse;

            /* animation: move 2s ease-in 0s infinite alternate; */
        } 
        /*  @keyframes 定义动画轨迹 需要配合animation属性捆绑到一个选择器上一起去使用 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(400px,0);
            }
            50%{
                transform: translate(400px,400px);
            }
            75%{
                transform: translate(0,400px);
            }
            100%{
                transform: translate(0,0);
            }
            /* 当只有0%和100%的时候，可以用from和to关键字代替 */
            /* from{
                transform: translate(0,0);
            }
            to{
                transform: translate(400px,0);
            } */
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

洋洋阳@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画的属性

animation 1. animation-name 动画名称 2.animation-duration 动画持续时间 3.animation-timing-function 动画的速度曲线 linear 动画从头到尾的速度是相同的。 ease 默认值。动画以低速开始，然后加快，在结束前变慢。...
复制链接

扫一扫