html过渡动画transiton，帧动画animation

石以砥焉，以锐为利

于 2023-10-22 17:45:52 发布

阅读量853

点赞数 2

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/m0_63803244/article/details/133975552

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

过渡动画transiton

多个动画逗号隔开 transition:border 2s linear,width 1s linear 它的属性有：

transition-property设置指定属性进行过渡动画
transition-duration动画持续时间
transition-timing-function设置动画渐变速度， linear:匀速 ease:由慢到快由快到慢 ease-in：由慢到快 ease-out由快到慢 ease-in-out(由慢到快由快到慢 )
transition-dalay设置动画延迟时间，点开始后五秒后才开始动画

帧动画animation

1.animation-name设置动画名称

2.animation-duration设置动画持续时间

3.animation-timing-function设置动画渐变速度 linear:匀速 ease:由慢到快由快到慢 ease-in：由慢到快 ease-out由快到慢 ease-in-out(由慢到快由快到慢 )

4.animation-dalay设置动画延迟时间

5.animation-iteration-count 设置动画执行次数无限次infinite

6.animation-direction 值有alternate(交替) 动画在奇数次正向播放，偶数次反向播放

7.animation-play-state设置动画播放状态 paused暂停帧动画

定义 @keyframes 动画名称
{ 百分数|to|from
    { .... } 
 ...... }

案例：流动的水滴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes zz{
            20%{border-radius: 50% 50% 69% 31% / 50% 34% 66% 50% ;}
            50%{border-radius: 64% 36% 29% 71%/50% 62% 38% 50% ;}
            to{
                border-radius: 50% 50% 69% 31% / 50% 49% 51% 50% ;
            }
        }
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        height: 100vh;
            background-color: rgba(29, 122, 122, 0.162);
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 200px;
            height: 200px;
            box-shadow: 10px 10px 20px rgb(0,0,0,0.3) inset,-10px -10px 10px rgba(82, 79, 79, 0.3) inset,15px 15px 15px rgb(0,0,0,0.3) ;
            border-radius: 48% 52% 63% 37% / 60% 49% 51% 40% ;
            animation: zz 2s alternate infinite;
            position: relative;
        }
        .box::after{
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            background-color:rgba(255, 250, 250, 0.67);
            border-radius:  48% 52% 63% 37% / 60% 49% 51% 40%  ;
            left: 63px;
    top: 35px;
        }
        .box::before{
            content: "";
    width: 13px;
    height: 12px;
    position: absolute;
    background-color: rgba(255, 250, 250, 0.67);
    border-radius: 76% 24% 69% 31% / 76% 12% 88% 24%;
    left: 85px;
    top: 48px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

石以砥焉，以锐为利

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html过渡动画transiton，帧动画animation

3.animation-timing-function设置动画渐变速度 linear:匀速 ease:由慢到快由快到慢 ease-in：由慢到快 ease-out由快到慢 ease-in-out(由慢到快由快到慢 )5.animation-iteration-count 设置动画执行次数无限次infinite。7.animation-play-state设置动画播放状态 paused暂停帧动画。2.animation-duration设置动画持续时间。1.animation-name设置动画名称。
复制链接

扫一扫