CSS动画

最新推荐文章于 2024-12-11 14:29:21 发布

在下河南彭于晏

最新推荐文章于 2024-12-11 14:29:21 发布

阅读量255

点赞数

文章标签： css 动画 css3

本文链接：https://blog.youkuaiyun.com/da_shuai_bi_a/article/details/129435972

版权

什么是动画?

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1.关键帧的语法规则

@keyframes move {
0% { transform：translateX(0);}
100% { transform：translateX(300px); }
}

@keyframes 表示要制定关键帧规则(动画脚本)
move 自定义的关键帧名称，注意不要用数字开头，尽量做到见名知意
{ } 用来包裹所有的执行阶段
0%或from 都表示动画还没开始的初始状态
100%或to 都表示动画结束的状态

1.推荐使用百分比，可以制定多个动画阶段0%…20%…50%…79%…100%
2.每个动画阶段都可以设置多个CSS样式属性
3.动画不一定需要搭配伪类使用，刷新页面就会执行
4.动画执行完毕后，默认会到起始位置
动画脚本一定要通过animation属性执行！！！

2.使用动画脚本(最简写法)

animation：go 2s;
第1个属性值是要执行的动画脚本名
第2个属性值是动画脚本的执行时间

3.Animation动画属性的拆分

animation-name: move; 要执行的关键帧名称，必写
animation-duration: 2s; 关键帧的执行时间，单位(秒)，必写
animation-delay: 1s; 关键帧的延迟时间，单位(秒)
animation-timing-function: ease; 动画的执行方式
和过渡一样，可以用贝塞尔曲线，默认值为ease,一般用linear匀速
animation-iteration-count: 1; 动画的执行次数，默认值为1
没有单位，直接写数字，我们常用infinite表示无限次
animation-fill-mode: backwards; 动画结束后立即回到初始位置
如果需要动画执行完毕时，停留在终点位置，可以将此值设置为forwards
animation-play-state: running; 动画的播放状态，默认值running执行
如果需要暂停可以将此值设置为paused暂停
比如可以结合伪类，用户触发动画暂停，比如商品滚动条，鼠标移入就会暂停滚动
animation-direction: normal; 动画的播放次序，默认从0%~100%播放
如果需要修改播放次序，比如可以设置alternate正反序交替执行(先正序执行，再反序执行)
还可以设置成reverse反序执行

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }

        #box>div {
            margin: 0px auto;
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 50%;
            display: none;
            animation: go 4s infinite linear;
        }

        #box>button {
            height: 40px;
            width: 100px;
            /* border: none; */
            position: relative;
            top: 100px;
            left: 850px;
        }

        @keyframes go {
            0% {
                transform: rotateX(0deg);
                background-color: aquamarine;
            }
            50% {
                transform: rotateX(180deg);
                background-color: blueviolet;
            }
            100% {
                transform: rotateX(0deg);
                background-color: brown;
            }
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="box1">

        </div>
        <button id="btn1">开始</button>
        <button id="btn2">清除</button>

    </div>

    <script>
        btn1.onclick = function () {
            var timer = setTimeout(() => {
                box1.style.display = 'block'
            }, 2000);
        }
        btn2.onclick = function () {
            box1.style.display = 'none'
        }



    </script>
</body>

CSS3过渡动画模板
http://web.chacuo.net/css3transition
这里面的效果都是二维的，可以选中自己喜欢的效果点一下，页面上部会出现此效果的代码，复制即可
注意:要把id值修改为自己的id选择器