transition
transition: property duration timing-function delay,property2...;
1 | //宽度 变化时间1s,背景颜色 变化时间0.5s 匀速变化 延迟1s执行 |
transition用于设置元素样式改变时的过渡动画效果,是以下4项属性的简写
- transition-property 属性名
- transition-duration 过渡时间
- transition-timing-function 过渡曲线
- transition-delay 延迟
transition-property
指定过渡效果适用于哪些CSS属性名
不设置transition-property,则默认给所有样式变化加上动画过渡效果
1 | <style> |
transition-timing-function
定义动画过渡曲线,接收以下值
- linear 匀速
- ease 慢-快-慢(默认值)
- ease-in 加速
- ease-out 减速
- ease-in-out 慢进慢出
- cubic-beier 自定义 cubic-bezier.com
transition-delay
设置过渡动画的延迟时间
animation
animation可以让元素从一种样式逐渐过渡到另一种样式
为了创建动画,需要先在@keyFrames规则中指定动画样式,然后将其绑定到元素上
@keyframes
@keyframes有两种格式
@keyframes *animationName*{
from {}
to{}
}
百分比格式可以更好的细分动画的过渡效果
@keyframes *animationName*{
0% {}
100% {}
}
背景颜色切换
body{
animation: changeColor 10s normal;
}
@keyframes changeColor {
from {background: blue};
to {background: yellow}
}
animation
animation: keyframes-name duration timing-function delay count direction fill-mode;
animation
animation是以下属性的简写:
- animation-name 动画名
- animation-duration 执行时间
- animation-timing-function 速度曲线
- animation-delay 延迟时间
- animation-iteration-count 播放次数
- animation-direction 否逆序播放
- animation-fill-mode 动画结束后的状态
animation-timing-function
控制动画过渡的速度曲线,类似transition-timing-function
animation-timing-function: linear | ease | ease-in| ease-out | cubic-bezier(n, n, n, n) | step(n, start|end) | step-start | step - end
注 step-start和step-end应用于拥有多个关键帧的动画
关于steps|step-start|step-end的详细描述 见CSS3 animation属性中的steps功能符深入介绍
animation-iteration-count
设置动画的播放次数
- infinite 无限次
- number 按次数播放
animation: changeColor 2s 3;
animation: changeColor 2s infinite;
animation-delay
设置动画延迟播放的时间
animation: changeColor 2s linear 5s infinite;
animation-direction
设置动画向前/向后/轮流播放
- normal(默认值)
- reverse 反向播放
- alternate 先正向播放,然后反向播放,交替运行
- alternate-reverse 先反向播放,然后正向播放,交替运行
animation-fill-mode
设置如何显示动画执行前/后的样式
- none(默认值)
- forwards 动画结束后,显示动画的最后一帧
- backwards 动画开始前,显示动画的第一帧
- both 相当于同时设置了forwards和backwards
关于animation-fill-mode的详细描述,见你所不知道的animation-fill-mode细节
下列3个方块的原始/动画开始/动画结束背景颜色分别为红/黄/绿,动画开始前均有2s延迟
animation-play-state
播放/暂停动画
- running 播放
- paused 暂停
注意:如果动画播放完毕,则无法通过设置animation-play-state重新播放
正确的做法是通过移除class再添加来重放动画
而且添加class不能直接写在remove后边,要套个setTimeout才有效,不知道为什么
ele.classList.remove("name");
//写在这里是无效的,动画不会播放
//ele.classList.add("fill-demo");
setTimeout((function(){
ele.classList.add("name");
}, 0);
常用动画
搜索栏变宽
inputBox {
transition: 0.5s ease-in;
width: 100px;
}
:focus {
width:400px;
}
animate.css
animate是一个跨浏览器CSS动画库,支持多种效果
下载地址
载入动画库
animate和普通外部css一样,可以用link标签直接载入.
或使用外部cdn载入
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
添加动画
在元素的class中加入 "animated"和动画名,也可使用"infinite"让动画一直播放
<div class="animated bounce">bounce</div>
<div class="animated infinite bounce">bounce</div>
可用以下属性更改动画的持续时间/延迟/播放次数
-vendor-animation-duration //单次动画持续时间
-vendor-animation-delay // 延迟时间
-vendor-animation-iteration-count //播放次数
注意 vendor需换成浏览器前缀,如 webkit, moz, etc
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
//一直播放
-webkit-animation-iteration-count: infinite;
//播放5次
-webkit-animation-iteration-count: 5;
//测试了chrome,其实不写前缀也能用
animation-iteration-count: 5;