动画（animation）

最新推荐文章于 2024-10-02 15:35:50 发布

李文炀

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量164

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_44641622/article/details/104368616

版权

可通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的动画效果，
相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

基本使用

制作动画分为两步：

1.先定义动画序列

用keyframes来定义动画

@keyframes 动画名称{
0%{
		width:100px
	}
100%{
		width:200px
	}
}

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
可以定义任意多的样式容易多的次数
请用百分比（整数）来规定变化发生的事件，

2.再使用（调用）动画

口诀：谁使用谁调用

语法：
animation-name: 动画名称
animation-duration:动画持续时间单位秒

常用属性

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-funcion	规定动画的曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画的播放次数，默认是1，还有infinite（无限）
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，alternate逆播放
animation-play-state	规定动画是否正在运行或者暂停，默认是running 还有 paused（暂停）
animation-fill-mode	规定动画结束后的状态，保持forwards，回到起始backwards

简写方法

语法：
animation:名称持续事件运动曲线何时开始播放次数是否反方向动画起始或结束的状态

注意：
1、空格隔开，只需要用到默认值可以简写
2、简写属性里面不包含animation-play-state
3、暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用

热点图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .subject{
        position: relative;
        width: 800px;
        height: 675px;
        background: url("timg.jpg") no-repeat;
        background-size: 800px 675px;
        margin: 0 auto;
    }
    .map{
        position: absolute;
        top: 240px;
        right: 220px;
    }
    .map .dian{
        width: 8px;
        height: 8px;
        background-color:blue;
        border-radius: 50%;
    }
    .map div[class^=ripple]{
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        width: 8px;
        height: 8px;
        /*background-color: black;*/
        box-shadow: 0 0 12px blue;
        border-radius: 50%;
        animation: move 1s linear infinite;
    }
    .map div:nth-child(2){
        animation-delay:0.3s
    }
    .map div:nth-child(3){
        animation-delay:0.6s
    }
    .map div:nth-child(4){
        animation-delay:0.9s
    }
    .as{
        top: 534px;
        right: 141px;
    }
    @keyframes move{
        0%{}
        50%{
            width: 30px;
            height: 30px;
            opacity: 0.7;
        }
        100%{
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
</style>
<body>
    <div class="subject">
        <div class="map">
            <div class="dian"></div>
            <div class="ripple1"></div>
            <div class="ripple2"></div>
            <div class="ripple3"></div>
        </div>
        <div class="map as">
            <div class="dian"></div>
            <div class="ripple1"></div>
            <div class="ripple2"></div>
            <div class="ripple3"></div>
        </div>
    </div>
</body>
</html>