本文后续会进行完善…
1.css动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3 @keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
示例:
@keyframes myfirst
{
from {background: red},
to {background: yellow}
}
@-webkit-keyframes myyfirst
{
from {background: red}
to {background: yellow}
}
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
}
/* 动画样式部分 */
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<p><b>注意: </b> 该实例在IE9 及更早IE版本是无效的。 </p>
<div></div>
</body>
</html>
css动画的原理
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。
- 您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
- 0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
以下为利用百分比实现颜色与位置变化的动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
}
/* 动画样式部分 */
@keyframes myfirst{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
@-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p><b>注意: </b> 该实例在IE9 及更早IE版本是无效的。 </p>
<div></div>
</body>
</html>
动画属性设置
| 属性 | 描述 |
|---|---|
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background: red;
animation:myfirst 5s;
animation-name:myfirst;
animation-delay: 2s;
animation-timing-function: linear;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome 动画属性配置 */
-webkit-animation-name:myfirst;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
/* 动画样式部分 */
@keyframes myfirst{
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
@-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<p><b>注意: </b> 该实例在IE9 及更早IE版本是无效的。 </p>
<div></div>
</body>
</html>
js动画
参考文章
原生动画利用js代码，将动画以函数的方式写出来，可以实现多种动画样式，且可以自己做兼容处理，但由于要自己设立每一步的动画效果，因此代码量很大。
实现动画的简单示例:
<!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>原生js</title>
<style>
.odiv {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 400px;
}
</style>
</head>
<body>
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
<script>
window.onload = function() {
var odiv = document.getElementById('odiv')
odiv.onmouseover = function() {
console.log('startMover(0)')
startMover(0);
}
odiv.onmouseout = function() {
console.log('startMover(-200)')
startMover(-200);
}
}
var timer = null;
function startMover(a) { // 速度和目标值
clearInterval(timer); // 执行当前动画同时清除之前的动画
var odiv = document.getElementById('odiv');
timer = setInterval(function() {
var speed = (a - odiv.offsetLeft)/10; // 缓冲动画的速度参数变化值
console.log(a, speed)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (odiv.offsetLeft == a) {
clearInterval(timer);
} else {
console.log('样式变化')
odiv.style.left = odiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</body>
</html>
js动画和css动画的区别
js动画的优点:
1.动画控制能力强，可以在动画播放过程中，对动画进行精细控制，开始、暂停、终止、取消都是可以做到的。
2.动画效果比CSS3动画丰富，比如曲线运动，冲击闪烁，视差滚动效果，只有js动画才能完成。
3.大多数情况下没有兼容性问题，而CSS3动画有兼容性问题。
js动画缺点：
1.JS动画代码复杂度高于CSS3动画.
2.JS动画在浏览器的主线程中执行，而主线程还有其他复杂JS脚本时，可能出现阻塞从而出现丢帧的情况。
3. 频繁操作DOM的CSS属性，不停地执行重绘和重排，这对于性能的消耗是很大。
css3动画优点:
1.css动画比较少或者不触发重绘和重排。
2.部分属例如使用transform的translateZ进行3D变换性能够启动3D加速和GPU硬件加速。
css3动画缺点：
1.对比JS的优点就是CSS的缺点。
1658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
