CSS高级----动画

最新推荐文章于 2024-01-15 00:00:00 发布

B.Bz

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量259

点赞数

分类专栏： html5和css基础文章标签：动画 css css3

本文链接：https://blog.csdn.net/bjsyc123456/article/details/120874986

版权

html5和css基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

过渡

使用过渡就是为了让过程不那么僵硬，过程更 “ 滑~ ” 一点

语法：

transition: 属性 时间(秒[s] 或者 毫秒[ms]为单位);

演示：

<!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>
        div {
            width: 100px;
            height: 100px;
            /* 添加动画过程 */
            transition: all 2000ms;
            background-color: pink;
        }
        
        body:hover div {
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

动画

Keyframe(关键帧)

关键帧的定义

语法：
Keyframe(关键帧) 用于 CSS 动画，以便我们完全控制动画。创建 Keyframe(关键帧) 的样式非常简单。我们使用关键字 @keyframes，在后面跟动画名称：

		/* 定义两个关键帧 */
        @keyframes mydiv {
            from {
                /* 开始状态 */
            }
            to {
                /* 结束状态 */
            }
        }
        /* 定义多个关键帧 */
        @keyframes mydiv {
            0% {
                /* 开始状态 */
            }
            25% {
                /* ....状态 */
            }
            45% {
                /* ....状态 */
            }
            100% {
                /* 结束状态 */
            }
        }

关键帧的调用

调用属性：

属性	说明
animation-name	动画名称
animation-duration	动画持续时间，默认 0 ，单位 s 或 ms
animation-delay	动画延迟播放时间默认 0 单位 s 或 ms
animation-iteration-count	动画播放次数，默认 1，其他还有 `infinite`
animation-timing-function	动画加速函数，默认 ease，其他还有 linear、ease-in、ease-out、ease-in-out等
animation-direction	动画播放方向，默认 normal, 其他还有 reverse、alternate等
animation-fill-mode	动画播放前后模式，默认 none, 其他还有 forwards、backwards、both
animation-play-state	动画播放或暂停状态，默认 running,其他还有paused

以上八种属性，也可以通过 animation的属性，做简短的缩写，用法如下:

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

演示：


<!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>
        div {
            width: 100px;
            height: 100px;
            /* 调用关键帧  关键帧名字  5s时间  无限循环播放  匀速播放 */
            animation: mydiv 5s infinite linear;
        }
        
        @keyframes mydiv {
            0% {
                /* 开始状态 */
                background-color: aqua;
            }
            25% {
                /* ....状态 */
                background-color: blueviolet;
            }
            50% {
                /* ....状态 */
                background-color: coral;
            }
            75% {
                /* ....状态 */
                background-color: darkred;
            }
            100% {
                /* 结束状态 */
                background-color: aqua;
            }
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

B.Bz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高级----动画

过渡使用过渡就是为了让过程不那么僵硬，过程更 “ 滑~ ” 一点语法：transition: 属性时间(秒[s] 或者毫秒[ms]为单位);演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫