animation-name使用简介（初级）

最新推荐文章于 2024-05-06 19:28:55 发布

xiaotao131

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签：动画

本文链接：https://blog.csdn.net/xiaotao131/article/details/78146690

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

animation-name使用简介
1、animation-name是什么
2、animation-name使用
3、animation-name使用详解

animation-name是什么

animation-name英文意思就是【动画名称】，animation-name属性就是应用动画的名字，在使用已定义好的动画时能引用到对应的动画。

animation-name使用

使用例子：

<!DOCTYPE html>
<html>
<head>
    <title>animation-name</title>
    <style type="text/css">
        @keyframes mymove {
            from {left:0px;}
            to {left:200px;}
        }
        div {
            width:100px;
            height:100px;
            background:red;
            position:relative;

            animation-name:mymove;
            animation-duration:5s;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>