CSS3之动画(animation)和四个小案例

最新推荐文章于 2024-07-29 14:14:21 发布

小艾同学喔

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量2.4k

点赞数 7

分类专栏：分享前端知识文章标签： html5 html css css3

本文链接：https://blog.csdn.net/al654123/article/details/104738387

版权

一、动画(animation)

1.动画概述

可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

2.语法

1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。

2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画

3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。

@keyframes 动画名称 {
   
	0%{
   
		初始状态属性
	}
	100%{
   
		结束状态属性
	}
}

div {
   
	<!--调用动画-->
	animation-name:动画名称;
	<!--动画持续时间-->
	animation-duration:time;
}

3.用法

        @keyframes move {
   

            /* 初始状态 */
            0% {
   
                transform: translate(0, 0);
            }

            /* 结束状态 */
            100% {
   
                transform: translate(1200px, 0);
            }
        }
        .box1 {
   
            background-color: #f34;
            /* 调用动画名称 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 3s;
        }

4.多个动画序列用法

        @keyframes move {
   

            /* 初始状态 */
            0% {
   
                transform: translate(0, 0);
            }

            /* 百分比是动画总时间的百分比：10s+25%=2.5s */
            /* 百分比要是整数 */
            25% {
   
                transform: translate(1200px, 0);
            }

            /* 移动的位置时相对于初始位置，不是相对于自身 */
            50% {
   
                transform: translate(1200px, 500px);
            }

            75% {
   
                transform: translate(0, 500px);
            }

            100% {
   
                transform: translate(0, 0);
            }
        }

        div {
   
            width: 100px;
            height: 100px;
            background-color: #f34