1、CSS动画实现的不同方式及对应描述:
方式 | 描述 |
CSS3 transition | 基于CSS3的过渡效果,可以控制属性变化的速度、时间、函数类型等 |
CSS3 transform | 基于CSS3的变换效果,可以对元素的位置、大小、旋转、倾斜等进行操作 |
CSS3 animation | 基于CSS3的动画效果,可以实现复杂的帧动画、逐帧动画、缓动动画等 |
SVG动画 | 使用SVG实现动画效果,可以实现矢量图形的动态变化和交互效果 |
JavaScript控制CSS | 使用JavaScript控制CSS实现动画效果,可以实现更加复杂的动画效果,如点击交互、响应式布局等 |
CSS3 transition、CSS3 transform、CSS3 animation是常用的CSS动画实现方式,keyframes可以进一步定制动画效果,JavaScript控制CSS可以实现更加复杂的动画效果,SVG动画则适用于矢量图形的动态变化和交互效果。
2、示例
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta 1、指定网页编码信息;2、使用name和content添加一些辅助说明 3、使用http-equiv和content添加一些指定动作,如自动刷新并跳到新页面-->
<meta charset="UTF-8">
<!-- <meta name="description" content="transition动画"> -->
<!-- <meta http-equiv="refresh" content="2" url="http://www.baidu.com"> -->
<title>transition动画</title>
<style>
.box-transition {
width: 100px;
height: 100px;
background-color: red;
/* transition: background-color 1s ease-in-out; */
transition: width 1s, height 1s;
}
.box-transition:hover {
/* background-color: blue; */
width: 200px;
height: 200px;
}
.box-transform {
width: 50px;
height: 50px;
background-color: red;
transition: transform 1s;
}
.box-transform:hover {
/* transform: scale(2); */
transform: translateX(100px) translateY(100px) rotate(180deg) scale(2);
}
.box-animation {
width: 100px;
height: 100px;
background-color: red;
/**
* 水平来回移动
* ease-in-out 慢快慢;其次还有 linear 匀速;ease 慢快慢;ease-in 慢快;ease-out 快慢
* infinite为重复不停止运动,也可以是具体重复次数,如2
*/
animation: move 3s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.box-js {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
transition: left 1s ease-in-out;
}
</style>
<!--
js依赖放在此处加载,在下载和执行时会阻塞html渲染
<script></script>
添加 defer 属性,下载不会阻塞html渲染,并在html渲染完毕后执行
<script defer></script>
添加 async 属性,下载不会阻塞html渲染,但在下载完毕执行时会阻塞html渲染
<script async></script>
-->
</head>
<body>
<p>
1、transition: 鼠标移入,宽度从100px到200px
<div class="box-transition"></div>
</p>
<p>
2、transition+transform: 鼠标移入,旋转飞出(水平向右,向下分别移动100px,过程旋转180度,且放大2倍)<br/>
另外,transform的变换是不会影响其他布局的,所以她比transition要流畅(即性能影响相对较小)
<div class="box-transform"></div>
</p>
<p>
3、animation+keyframes: 左右来回移动
<div class="box-animation"></div>
</p>
<p>
4、SVG动画:
</p>
<svg width="200" height="100">
<rect x="10" y="10" width="50" height="50" fill="red">
<animate attributeType="XML" attributeName="x" from="10" to="100" dur="3s" repeatCount="indefinite" />
</rect>
</svg>
<p>
5、通过js和transition结合,交互式动画:
<div class="box-js"></div>
<button onclick="move()">Move Right</button>
</p>
<script>
function move() {
var box = document.querySelector('.box-js');
box.style.left = '100px';
}
</script>
</body>
</html>