2.3-15动画的定义与调用

最新推荐文章于 2024-05-30 16:18:48 发布

洋芋不姓杨

最新推荐文章于 2024-05-30 16:18:48 发布

阅读量102

点赞数

分类专栏： css 文章标签：动画 css3 css

本文链接：https://blog.csdn.net/youaigusheng/article/details/125539928

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2.3-15动画的定义与调用

动画的定义

* 可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀。
@keyframes r {
定义动画  动画的名字
from{
起始状态
transform:rotate(0);
}

}
to {
结束状态
transform:rotate(360deg);
}
}

动画的调用

* 定义动画之后，就可以使用animation属性调用动画；
animation：r 1s linear 0s;
    动画名字 总时长 缓动效果

动画的执行次数

* 第五个参数就是动画的执行次数；
animation：r 1s linear 0s 3;
* 如果想永远执行可以写infinite;
animation:r 1s  linear 0s infinite;
* 如果想让动画的第2、4、6.....(偶数次)自动逆向执行，那么要加上alternate参数即可；
animation:movelr 2s linear 0s infinite alternate;
* 如果想让动画停止在最后结束状态，那么要加上forwards;
animation:changeToCircle 1s linear 0s forwards;

实例

<!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 {
    width: 200px;
    height: 200px;
    background-color: orange;
    animation: r 3s linear 0s 4;
}
@keyframes r{
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    animation: movelr 3s linear 0s infinite alternate;
}
@keyframes movelr {
    from {
        transform:translateX(0);
    }
    to {
        transform: translateX(1000PX);
    }
}
    .box3{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
        animation: changeToCircle 1s linear 0s forwards;
    }
    @keyframes changeToCircle {
        from {
            border-radius: 0;
        }
        to {
            border-radius: 50%;
        }
    }
    </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></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>
        .box{
            width: 200px;
            height: 200px;
            background-color: coral;
            animation:changeColor 3s linear 0s alternate infinite ;
        }
        @keyframes changeColor{
            0%{
                background-color: red;
            }
            20%{
                background-color: yellow;
            }
            40%{
                background-color: blue;
            }
           60%{
                background-color: green;
            }
            80%{
                background-color: purple;
            }
            100%{
                background-color: orange;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>