【css】css3中的动画功能

最新推荐文章于 2022-09-22 10:38:28 发布

康一夏

最新推荐文章于 2022-09-22 10:38:28 发布

阅读量171

点赞数

分类专栏： H5基础小课堂

本文链接：https://blog.csdn.net/qq_37347273/article/details/103923589

版权

H5基础小课堂专栏收录该内容

29 篇文章 3 订阅

订阅专栏

css3动画

transform 动画
- 2d动画
transition 动画过渡
animation 动画 @keyframes 自定义动画

transform 动画

2d动画

translate 位移
可为负值

transform: translate(x,y);

rotate旋转角度
正值，顺时针；负值，逆时针

transform: rotate(360deg);

scale 放大缩小
放大，大于1；缩小，小于1

transform: scale(x,y);

等比放大

transform: scale(1.5); // scale(1.5) = scale(1.5,1.5)

skew 倾斜

transform: skew(xdeg,xdeg);

// 变成平行四边形
transform: transform:skew(45deg,-45deg);

rotate 3d动画

transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);

transition 动画过渡

/* 合写形式 */
transition: width .5s

transition-property 需要过渡的css属性
可省略默认为所有属性all

transition-property: width;

transition-duration 持续时间
默认为0

transition-duration: 1s;

transition-timing-function 速度变化方式

transition-timing-function: ease ;

ease默认速度逐渐变慢
ease-in加速
ease-out 减速
ease-in-out 先快后慢
linear 匀速

transition-delay 动画延迟时间

transition-delay: 1s;

animation 动画 @keyframes 自定义动画

通过使用@keyframes 能够自定义动画：将一套 CSS 样式逐渐变化为另一套样式。

@keyframes animationname {
	keyframes-selector {
		css-styles;
	}
}

定义两个关键帧的动画动画

// 定义两个关键帧的动画动画；name自定义
@keyframes name{
	from {
		属性（组）设置1
	}
	to {
		属性（组）设置2
	}
}

from 等价于 0%；0% 是动画的开始时间
to 等价于100%；100% 动画的结束时间
定义多个关键帧动画

// 定义多个关键帧动画；name自定义
@keyframes name{
	0%{
		属性（组）设置1
	}
	20%{
		属性（组）设置2
	}
	……
	100%{
		属性（组）设置n
	}
}

调用自定义动画

div {
	animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

name 动画名称
duration 过渡时间
timing-function 过渡方式
delay 延迟
interation-count 循环次数
number / infinite 无限次（默认1次）
direction 播放方向
normal（默认）0%-100%
alternate奇数次正常播放0%-100%，偶数次逆序播放100%-0%
play-state 播放状态
running（默认）播放中
paused 暂停

示例

@keyframes mymove {
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}

/* Firefox */ 
@-moz-keyframes mymove{
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}

/* Safari and Chrome */
@-webkit-keyframes mymove {
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}

/* Opera */
@-o-keyframes mymove {
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}

/* ie不支持 */

div {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
	animation: mymove 5s infinite;
	-moz-animation: mymove 5s infinite; /* Firefox */
	-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
	-o-animation: mymove 5s infinite; /* Opera */
}

动画示例模拟落地回弹

@keyframes jump{
	0%{
		opacity: 0;
		
		margin-top: -500px;
	}
	20%{
		opacity: 1;
		margin-top: 200px;
	}
	40%{
		margin-top: 120px;
	}
	60%{
		margin-top: 200px;
	}
	80%{
		margin-top: 180px;
	}
	100%{
		margin-top: 200px;
	}
}

img {
	animation: jump 1s; /*infinite alternate*/
}

动画示例摇摆

@keyframes shake{
	12.5%{
		transform: translate(-50px,0);
	}
	25%{
		transform: translate(0px,0);
	}
	37.5%{
		transform: translate(50px,0);
	}
	50%{
		transform: translate(0px,0);
	}
	62.5%{
		transform: translate(-25px,0);
	}
	75%{
		transform: translate(0px,0);
	}
	87.5%{
		transform: translate(25px,0);
	}

}

div {
	animation:shake .5s  infinite;
	/*interation-count 默认1   infinite 无限次循环*/
}

动画示例汽车驶过

// 小汽车
@keyframes drive{
	from{
		left: -800px;
	}
	to{
		left: 1500px;
	}
}

// 车轮
@keyframes scroll{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(1800deg)
	}
}

// 飞鸟1
@keyframes bird1{
	from{
		left: 1400px;
	}
	to{
		left: -700px;
	}
}

// 飞鸟2
@keyframes bird2{
	from{
		left: 1500px;
	}
	to{
		left: -600px;
	}
}

body{
	position: relative;
}

.car{
	position: absolute;
	bottom: 0;
	animation:drive 5s infinite linear alternate ;
}

.car .wheel{
	position: absolute;
	bottom: 5px;
	animation: scroll 5s infinite linear alternate;
	
	/*transform:rotateZ(360deg);
	transition-duration: 3s;*/
}

.car .wheel1{
	left: 96px;
}
.car .wheel2{
	left:522px;
}

.bird1{
	position: absolute;
	width:80px ;
	height: 100px;
	top: 10px;
	/*right: 0;*/
	animation: bird1 5s ease-in-out infinite;
}
.bird2{
	position: absolute;
	width:40px ;
	height: 60px;
	top: 0px;
	left: -50px;
	animation: bird2 5s ease-in-out ;
}

<body> 
	<img src="images/road.jpg" alt="" />
	<img class="bird1" src="images/bird.png" alt="" />
	<img class="bird2" src="images/bird.png" alt="" />
	<div class="car">
		<img src="images/car.png" alt="" />
		<img class="wheel wheel1" src="images/wheel.png" alt="" />
		<img class="wheel wheel2" src="images/wheel.png" alt="" />
	</div>
</body>