网站（十四）CSS使用动画

最新推荐文章于 2024-07-04 10:00:00 发布

KeithAlexander

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量213

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/KeithAlexander/article/details/80974032

版权

学习笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS使用动画

动画速度变换

transition-timing-function
- ease
- ease-in：先慢后快
- ease-out：先快后慢
- ease-in-out：开头结尾快
- linear：线性速度

动画属性

animation
- name：相当于之前的id
- iteration-count：动画播放次数
- direction：第二次反方向
@keyframes + id
- from
- XX%
- to

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style type="text/css">
        p {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
            animation-duration: 1000ms;
            animation-delay: 200ms;
            animation-name: RectangleDilation;
            animation-iteration-count: 3; /*进行3次后返回初始值*/
            animation-direction: alternate;/*第二次反方向*/
        }
        @keyframes RectangleDilation{ /*动画细节*/
            from{
                width: 100px;
                height: 100px;
                background-color: #FFEC32;
            }
            50%{
                width: 130px;
                height: 130px;
                background-color: #3b88ff;
            }
            75%{
                width: 160px;
                height: 160px;
                background-color: #58ff4a;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: #ffad2a;
            }
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

KeithAlexander

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站（十四）CSS使用动画

CSS使用动画动画速度变化easeease-in：先慢后快ease-out：先快后慢ease-in-out：开头结尾快linear：线性速度动画属性animation name：相当于之前的iditeration-count：动画播放次数direction：第二次反方向@keyframes + id fromXX%to&amp;lt;!DOCTYP...
复制链接

扫一扫