css3原生动画人物划入、文件渐变出现、背景图片旋转等等

css3原生动画，主要使用css中transform属性

前言

提示：主要动画效果包含了人物划入，文字渐变出现，和图片一直旋转等各种特效：

例如：当我们的项目中需要一些特殊的特效但是又没有合适的三方包适合使用的时候可以参考该文档中的css特效因为是原生的所以很好的就可以引入项目

警告：该文章为作者原创转载之前请联系作者

一、像是看电视一样的人物的划入效果

1.html部分

<div class="renwu_warp">
	<img src="./img/renwu_1.png">
</div>

2.css

.renwu_warp {
	height: 650px;
	width: 664px;
	position: absolute;
	left: 984px;
	top: 149px;
	overflow: hidden;
}
.renwu_warp img {
	position: relative;
	left: 900px;
	animation: 2s linear 0.4s 1 normal forwards running renwu_1;
}
@keyframes renwu_1 {
	0% {
		left: 900px;
	}
	100% {
		left: 0px;
	}
}

3.讲解

外部盒子设置背景宽高，还需要移出隐藏，然后把人物初始位置设置在盒子的外面，然后定义动画动画开始的时候就将人物从左边移入。
其中 animation中 2s （动画时长） linear （动画匀速进行,与之对应的值还有 ease-in 动画以低速开始 ease-out 动画以低速结束 ease 默认。动画以低速开始，然后加快，在结束前变慢 ease-in-out 动画以低速开始和结束） 0.4s (动画延时多久进行) normal（动画默认播放 相对应的还有 reverse 动画方向播放）running 指定动画正常运行 （与之对应 paused 制动动画暂停） renwu_1（动画名称）

4. 展示

这篇好文章是转载于：学新通技术网