css 动画

最新推荐文章于 2023-11-06 11:31:21 发布

-橙子不甜

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量222

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_51874993/article/details/124184632

版权

文章目录

css 动画

css 动画

写法

@keyframes 动画名称 {
            0% {

            }
            100% {
                background-position: -1600px 0;
            }/* 动画状态*/
        }
@keyframes 动画名称 {
    from {
    	background-color:red;
    }
    to {
    	background-color:blue;
    	}/* 动画状态*/
}

属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

关于animation-timing-function


linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start\|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。

动画案例

<!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>
        .move {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            border-radius: 50px;
            animation-name: move;/*动画名字*/
            animation-duration: 3s;/*持续时间*/
            animation-timing-function: ease;/*运动时间的变化曲线*/
            animation-delay: 1s;/*开始时间，或者说是延迟多久开始*/
            animation-fill-mode: forwards;/*规定当动画不播放时（当动画完成时，或当动画有一个延迟未开
            始播放时），要应用到元素的样式。*/
            animation-iteration-count: infinite;/*设置动画是否重复播放*/
            animation-direction: alternate;/*设置动画在下一周期反向播放*/           
            }
        .move:hover {
            animation-play-state: paused/*动画是否正在运行或暂停*/
        }    
        @keyframes move {
            25% {
                transform: translate(400px,0);
            }
            50% {
                transform: translate(400px,400px);
            }
            75% {
                transform: translate(0,400px);
            }
            100% {
                transform: translate(0,0);
            }
        }
    </style>
</head>
<body>
    <div class="move">
    </div>
</body>
</html>

动画的综合写法

 animation: name duration timing-function delay iteration-count direction fill-mode;
/*name和duration必须写，否则没有效果出现*/
animation-play-state: paused;

注意animation-play-state: paused;没有在默认中；

-橙子不甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫