CSS动画

最新推荐文章于 2023-12-18 14:45:00 发布

The hang 土豆

最新推荐文章于 2023-12-18 14:45:00 发布

阅读量4.6k

点赞数

文章标签： html5 动画 css3

本文链接：https://blog.csdn.net/LiHang1234567777/article/details/125916081

版权

文章目录

前言
一、css动画是什么？
二、使用步骤

前言

今天简单了解一下css动画

一、css动画是什么？

CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。

二、使用步骤

1.主要样式

指定动画名称：animation-name;

动画持续时间： animation-duration;

动画填充模式：animation-fill-mode: forwards; /* forwards把动画停在最后一个 */

动画延迟时间：animation-delay /* 当值为负数时动画已经开始了多长时间*/

2.读入数据

代码如下（示例）：

<style> 
.div1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 50%;
            /* 应用动画 */
            animation-name: div_animate;
            /* 指定动画名称 */
            animation-duration: 5s;
            /* 动画持续时间 */
            animation-fill-mode: forwards;
            /* 动画填充模式，forwards把动画停在最后一个 */
            animation-delay: -2s;
            /* 动画延迟时间  当值为负数时动画已经开始了多长时间*/
        }
        /* 定义的动画规则 */
        
        @keyframes div_animate {
            /* from {
                background-color: aqua;
            }
            to {
                background-color: #000;
            } */
            /* 第二种 */
            25% {
                background-color: yellow;
            }
            50% {
                background-color: aqua;
            }
            100% {
                background-color: #000;
            }
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了css动画的使用方法。

The hang 土豆

关注

0
点赞
踩
5

收藏

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

今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
复制链接

扫一扫