CSS3之动画属性_Css

私人博客

前端系列文章——传送门
css系列文章——传送门

css3 动画是使元素从一种样式逐渐变化为另一种样式的效果

要创建 css3 动画，需要了解 @keyframes 规则
@keyframes 规则是创建动画
@keyframes 规则内指定一个 css 样式和动画将逐步从目前的样式更改为新的样式

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果
指定至少这两个css3的动画属性绑定向一个选择器
规定动画的名称
规定动画的时长

@keyframes 动画名称 {

	/*定义关键帧 必须有头有尾*/
	from 或者 0%{
		css-styles:
	}

	50%{
		css-styles:
	}

	to 或者 100%{
		css-styles:
	}
	}

animation: 动画名称  执行时间  速度效果  延迟时间  执行次数  往复执行;

animation-name 动画名称
animation-duration 执行时间
animation-timing-function 速度效果
animation-delay 延迟时间
animation-iteration-count 执行次数
- infinite 播放无限次（永远）
animation-direction 往复执行
- reverse 动画反向播放
- alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
- alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

animation-play-state:paused[暂停] | running[启动];

相同点：
都是随着时间改变元素的属性值
不同点：
1. transition 需要触发一个事件(hover 事件或 click 事件等)才会随时间改变其 css 属性；
2. 而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3 的 animation 就需要明确的动画属性值

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のblog


验证码：

验证码：