CSS动画

最新推荐文章于 2024-09-29 21:43:16 发布

相约天涯海角

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量286

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33172851/article/details/142617371

版权

1. 制作动画步骤

先设置动画
使用动画

2. 定义动画

@keyframes move{
    0%{
    
        transfrom:translateX(0px);
    
    }

    100%{
        transfrom:translateX(100px);
    }
}

3. 动画序列

0%是动画开始， 100%是动画结束，这些规则就是动画序列
在@keyframes中定义某项CSS样式，创建当前样式组件改变成新样式的动画效果
动画是是元素从一种样式逐渐转换变化为另外的样式
需要用百分比规定动画变化的时间，可以使用关键字from和to等价0%和100%

4. 动画属性

属性	说明
animation	所有动画的简写属性
animation-name	规定动画名称
animation-duration	规定一个动画周期花费的时间
animation-riming-function	动画速度默认是ease
animation-delay	规定开始的时间默认是0
animation-iteration-count	动画播放的次数，默认是1次，infinite 无限循环
animation-direction	规定动画下一个周期逆向播放，默认是normal， alternate 逆向播放
animation-play-state	规定动画是播放还是暂停默认runing，暂停pause
animation-fill-mode	规定动画结束状态后是保持forwards还是backwards

5. animation动画简写

格式说明

animation：动画名称
                  持续时间
                  运动曲线(默认ease)
                  合适开始(默认0)
                  播放次数（默认1， infinte 无线循环）
                  是否反向(默认是normal， 反向alternate)
                  动画开始或结束状态(默认backwords， 保持状态forwards)

速度曲线说明

linear 从头---->末尾匀速
ease 低速开始-----> 加速 -----> 变慢
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始------>结束
step(n) 指定时间函数中间间隔数量(步长)

示例代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: bisque;
			}
			div{
				height: 100px;
				width: 200px;
				
				background-image: url("../img/ygl3p9tx.png");
				animation: move 1s steps(8) infinite , move_center 12s forwards
				;
				
			}
			
			@keyframes move {
				100%{
					background-position: 1600px;
				}
			}
			
			@keyframes move_center {
				100%{
					margin-left: 50%; 
				}
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>