css动画总结

weixin_34050005

于 2019-06-05 14:28:00 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yayaxuping/p/10979395.html

本文深入探讨了CSS中动画和过渡效果的实现方法，包括关键帧动画、过渡属性及变换效果，通过实例展示了如何使用这些特性来增强网页元素的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 100px;
            width: 100px;
            background: green;
            transition: transform 1s ease-in 1s;
        }

        #box:hover {
            transform: rotate(180deg) scale(.5, .5);
        }

        /* 
        transition: property duration timing-function delay;
                    属性名字  完成动画的时间   动画的曲线  定义的效果何时开始的
        transition：需要事件触发，只能定义一个属性的变化，不能涉及多个属性
        */
        .box {
            height: 100px;
            width: 100px;
            border: 15px solid black;
            animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
        }

        .box:hover {
            animation-play-state: paused;
        }

        @keyframes changebox {
            10% {
                background: red;
            }

            50% {
                width: 80px;
            }

            70% {
                border: 15px solid yellow;
            }

            100% {
                width: 180px;
                height: 180px;
            }
        }

        /* animation： 名称 动画时间 动画的曲线  动画何时开始  动画的次数  动画的方向*/
    </style>
    <!-- 
        animation：动画的叠加
        transition：单一动画
        transform：缩放
        translate:移动
     -->
</head>

<body>
    <div class="box"></div>
</body>

</html>
<script>
</script>