【css3动画+案例】

最新推荐文章于 2024-03-29 03:34:03 发布

快秃头的小爽

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量109

点赞数

文章标签： css3 css 动画

本文链接：https://blog.csdn.net/weixin_52218117/article/details/125925093

版权

CSS动画关键帧动画属性 transform 过渡效果

关键词由CSDN通过智能技术生成

动画

动画使元素逐渐从一种样式变为另一种样式。

注意: 如需使用 CSS 动画，必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

动画的使用:

1.声明动画

@keyframes 动画名{}

2.调用动画

animation: 动画名 3s linear;

代码：

<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            animation: move 5s linear;
        }
        /* @keyframes move{
            from{
                transform: translate(0,0);
            }
            to{
                transform: translate(180px,0);
            }
        } */
        @keyframes move{
            0%{
                background-color: red;
            }
            10%{
                width: 200px;
            }
            20%{
                height: 800px;
            }
            50%{
                background-color: pink;
            }
            70%{
                width: 800px;
            }
            100%{
                width: 400px;
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画常用属性

属性名	解释说明
animation-name	设置@keyframes动画名称
animation-duration	设置动画完成一个周期所用时间.(默认0)
animation-timing-function	设置动画速度曲线,默认”ease”
animation-delay	设置动画延迟时间,默认0
animation-iteration-count	设置动画播放次数,默认1,特殊值: infinate（无限次）
animation-direction	设置动画播放方向,默认”normal”, alternate 先正后逆播放
animation-fill-mode	规定动画结束后状态,保持结束状态:forwards,回到起始:backwards
animation-play-state	设置动画的播放状态, paused 暂停默认值是running 播放

动画案例：

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: brown;
            animation: dh1 5s linear;
        }
        @keyframes dh1{
            0%{
                background-color: aqua;
            }
            25%{
                transform: translate(500px,0);
                /* transform: rotate(180deg); */
            }
            50%{
                transform: translate(500px,500px);
                /* transform: rotate(180deg); */
                background-color: bisque;
            }
            75%{
                transform: translate(0,500px);
                /* transform: rotate(180deg); */
            }
            100%{
                transform: translate(0,0);
                /* transform: rotate(180deg); */
                background-color: bisque;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>