CSS动画的使用

小刘|

于 2024-08-28 23:12:23 发布

阅读量314

点赞数 11

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_69304031/article/details/141652153

版权

过渡动画

transition-property指定对哪个html元素的css属性及逆行平滑渐变处理

transition-duration 指定渐变持续的时间

transition-timing-function 渐变的速度支持如下几个值

ease动画开始时较慢，然后速度加快，达到最快时间在减慢速度

linear 动画开始到结束保持不变

ease-in 动画开始满，然后加快

ease-out 动画刚开始最快，然后速度减慢

2帧动画

animatio-name 设置动画名称

anmiation-duration 指定渐变持续的时间

animation-timing-function 渐变的速度支持如下几个值

ease动画开始时较慢，然后速度加快，达到最快时间在减慢速度

linear 动画开始到结束保持不变

ease-in 动画开始满，然后加快

ease-out 动画刚开始最快，然后速度减慢

animation-delay 指定动画延迟多长时间之后执行

animation-iteration-count 执行几次 infinite无限执行

animation-direction 设置动画的方向 alternate交替

animation aaa 4s linera 2s infinite alternate; 调用动画的取值不分先后如果有两个时间第一个表示动画时长，第二个表示延迟时间

关于帧的定义

@keyframes aaa{

from|to|百分比{

属性1：值；

属性2：值；

.......

}

下面是一个简单的实例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/动画.css">
</head>
<body>
    <div >aa</div>
</body>
</html>

css

    50%{
        width: 600px;
        height: 400px;
        background: red;
        border-radius: 150px;
     }

     100%{
        width: 400px;
        height: 200px;
        background: rgb(141, 237, 100);
        border-radius: 50px;
     }
 }



div{
    width: 100px;
    height: 100px;
    background: burlywood;
    animation:aaa ;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-delay:2s ;
    /* animation-iteration-count:infinite; */
    animation-direction: alternate;

   
}