css3动画
一、CSS3动画介绍
css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
二、CSS3动画制作方式
css3 动画制作分为两步：1.创建动画、2.绑定动画（调用动画）。
1.创建动画
@keyframes 规则
@keyframes 规则用于创建动画。单词是关键帧的意思，在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。 需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。注意：还可以再0%-100%之间添加多个帧。
@keyframes 书写方法
@keyframes 动画名称 {
/*动画过程，可以添加任意百分比处的动画细节*/
}
注意：其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。
2.绑定动画（调用动画）
2.1animation属性
需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。 animation属性用于对动画进行捆绑。
2.2animation属性语法
div {
animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
2.3单一属性列表
三、CSS3动画案例—小球弹跳效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3—动画</title>
<style>
body,div {
margin: 0;
padding: 0;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 150px auto;
background-color: pink;
animation: move2 2s linear infinite 0s;
}
@keyframes move{
from {
transform:translateY(0);
}
to {
transform: translateY(100px);
}
}
/*通过2种写法，我们再浏览器中发现，第二种方式的动画效果更好看一些，
视觉上有弹跳的效果，说明我们给他添加多个帧的方式是更好的。
注意：1.我们再定义动画的时候必须将0%或者from设置为0，避免出现帧动画的问题。
2.再创建完了动画，一定要给需要该动画的元素绑定动画（调用动画）才能生效。
否则就相当于写了动画，白写，没有去调用它。*/
@keyframes move2 {
0% {
transform: translateY(0);
}
25% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
四、浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
- 点赞
- 收藏
- 关注作者
评论（0）