介绍CSS3的动画基础以及transition和animation的写法,时间函数的应用,结合js开发优美的过渡效果,多方面结合。
CSS动画的特点:
- 开发周期短
- 增加浏览页面的趣味性
- 增加用户的视觉冲击力
一、CSS动画介绍
CSS 3 既有帧动画,又有过渡动画
动画的两个属性:transition
和animation
动画常和transform
属性常用,但是它并不是动画属性,它会主动开启浏览器的加速,也即实现GPU加速,让我们的动画更加细腻,不会改变原有的文档流的结构,防止页面的频繁闪现。
动画的兼容:IE9及之前不支持动画
动画的应用:
- 功能性的菜单按钮
- 宣传用的轮播图,各种页面效果的缓冲
- 页面之间的切换过渡,网页小游戏
CSS动画的扩展:
Vue-transition , sniper, Animate.css, svg 等都需要动画基础
二、CSS基础知识
- transition基础和写法
属性名称(property)
过渡效果周期和(duration)和延迟时间(delay)
速度效果的速度曲线(timing-function)
使用示范:
.box{
width: 100px;
height: 100px;
background: #6d6d6d;
}
.demo-1{
&:hover{
width: 500px;
}
// linear ease
transition: width 2s linear 2s; // ease
}
.demo-2{
&:hover{
transform: rotate(45deg); // 旋转45度
}
transition: transform 1s ease-out;
}
Tips:
- display不能和transition一起使用
- transition后面尽量不要跟all
- 常见的闪动可以使用perspective 和 backface-visibility
- animation的基础和写法
动画名称(name)— @keyframes
动画完成的周期(duration)延迟时间(delay)
动画的播放速度(timing-function)
使用示例:
.demo-2{
&:hover{
.cell{
animation: move 2s linear;
}
}
.cell{
width: 200px;
height: 200px;
background: red;
}
}
@keyframes move{
100%{
transform: translateX(200px);
}
}
animation相当于升级版的transition,还可以定义下列属性:
播放次数(iteration-count)
播放方向(direction)即是否轮流播放和反向播放
停止播放的状态(fill-mode ) 是否暂停⏸️(play-state)
infinite
表示可以无限循环播放
alternate
表示正反向播放,reverse
表示反向播放
forwards
表示停留在最后一帧, running
无限播放
实例:animation: move 2s linear 2 alternate forwards
使用场景:
跑马灯,loading
animation解决了transition display:none bug
跳动的元素:
.demo-4{
margin: 40px auto;
border-radius: 50%;
animation: jump 2s ease-in infinite;
}
@keyframes jump{
0%{
transform: translateY(0px);
}
40%{
transform: translateY(200px);
}
50%{
transform: translateY(200px);
}
100%{
transform: translateY(0px);
}
}
三、属性详解
- 时间函数:管理着动画在单位帧内播放的速度曲线
使用的是 三次贝塞尔函数 的数学函数
预设值 linear ease ease-in ease-out ease-in-out
.loading{
width: 108px;
height: 108px;
background: url(./img/loading.png) no-reapt;
border-radius: 50%;
animation: round 1s step(12) infinite;
}
@keyframes round{
100%{
transform: rorate(360deg);
}
}
.tuizi{
width: 200px;
height: 200px;
animation: run .5s steps(6) infinite;
background: url(./img/tuzi.png) no-repeat;
}
@keyframes run{
50%{
background-position-x: -1200px;
}
100%{
background-position-x: -2400px;
}
}
- 过渡和动画在js中的监听
js可以使动画的实现变得更加强大
animationstart
animationend、transitionend
animationiteration
对上面的例子实现监听
let runstart = () => { console.log('run start') }
let runend = () => { console.log('run end') }
let iteration = () => { console.log('iteration') }
let $loading = document.querySelector('.loading')
$loading.addEventListener('animationstart', runstart)
$loading.addEventListner('animationend', runend)
$loading.addEventListner('animationiteration', iteration)
监听事件的兼容性
- 在360,Safari和部分Chrome下需要webkitAnimationEnd
- IE 和 Firebox已经做了兼容可以直接写
$loading.addEventListener('webkitAnimationStart', runstart)
四、动画实战
- animation落雨到红包雨的实现
body,html{
height: 100%;
}
.content{
position: realtive;
height: 100%;
background: #f2f2f2;
overflow: hidden;
.yudi{
position: absolute;
opciaty: 0;
animation: drops 1.2s cubic-bezier(.54,.02,.51,.25) infinite;
width: 60px;
height: 60px;
background: url(../img/hongbao.png) no-repeat;
background-size: auto 60px;
}
}
@keyframes drops{
0%{
opacity: 0;
}
20%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
transform: translate3d(10px,100vh,-10px);
}
}
使用jquery代码如下:
let $content = $('.content');
let initNumber = 0;
for(let i = 0; i < 30; i++){
let lefts = Math.floor(Math.random()*5+2);
let delay = Math.floor(Math.random()*50+2);
initNumber += lefts;
let $div = $('').addClass('yudi').css({
"left": `${initNumber}%`,
"top": `${lefts}%`,
"animation-delay": `${delay/10}s`
});
$content.append($div);
}
- js配合动画属性实现图片无限滚动效果
实现类似<marquee>
的弹幕滚动效果
- transition实现轮播效果实战
实现swiper
三个小栗子我都在这个git仓库里: CSS3 Animation