CSS动画
动画的原理:
- 视觉暂留作用
- 画面逐渐变化
动画的作用
- 愉悦感
- 引起注意
- 反馈
- 掩饰
CSS中动画的类型
1. transition 补间动画
- 位置 - 平移 ( left / right / margin / tansform )
- 方位 - 旋转 ( transform )
- 大小 - 缩放 ( transform )
- 透明度 ( opacity )
- 其他 - 线性变换 ( transform )
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s, background-color 3s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
background-color: #0f0;
}
</style>
[transition-timing-function]https://matthewlein.com/tools/ceaser
2. keyframe 关键帧动画
@[toc]
## 动画的原理:
1. 视觉暂留作用
2. 画面逐渐变化
## 动画的作用
1. 愉悦感
2. 引起注意
3. 反馈
4. 掩饰
## CSS中动画的类型
### 1. transition 补间动画
- 位置 - 平移 ( left / right / margin / tansform )
- 方位 - 旋转 ( transform )
- 大小 - 缩放 ( transform )
- 透明度 ( opacity )
- 其他 - 线性变换 ( transform )
```html
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s, background-color 3s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
background-color: #0f0;
}
</style>
[transition-timing-function]https://matthewlein.com/tools/ceaser
2. keyframe 关键帧动画
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
</html>
3. 逐帧动画
- 使用于无法补间计算的动画
- 资源较大
- 使用steps()
<section class="container"></section>
<style>
.container {
width: 100px;
heigth: 100px;
border: 1px solid red;
background: url(./animal.png) no repeat;
animation: run 1s infinite;
animation-timing-function: steps(1);
}
@keyframes run {
0% {
background-position: 0 0;
}
25% {
background-position: -100px 0;
}
...
100% {
background-position: 0 0;
}
}
</style>
CSS面试真题
- CSS动画的实现方式有几种
- transition
- keyframes(animation)
- 过渡动画和关键帧动画的区别
- 过渡动画需要有状态变化
- 关键帧动画不需要状态变化
- 关键帧动画能控制更精细
- 如何实现逐帧动画
- 使用关键帧动画
- 去掉补间 ( steps )
- CSS动画的性能
- 性能不坏
- 部分情况下优于JS
- 但JS可以做到更好
- 部分高危属性
- box-shadow等
