CSS – Transition & Animation
前言
之前的笔记 CSS – W3Schools 学习笔记 (3) 就有讲过 CSS Transitions 和 CSS Animations.
这里做一个整理, 补上一些细节.
Transitions
5 个属性可以用
transition-property
transition-property: width;
watch propety width, 改变的时候就会有 animation
要设置多个就加逗号做分隔符:width, color, background-color
transition-delay
trasition-delay: 1s
表示 1 秒后触发,s = second,也支持 ms = millisecond
1s, 500ms, 0.5s 都是可以的。
transition-duration
transition-duration: 1s
整个 animation 过程用时 1 秒
transition-timing-function
过度的体验, 比如 ease-in, ease-out 那些, default 是 ease
参考: Cubic Bezier
transition
shorthand property
transition: width 2s linear 1s;
property, duration, function, delay
其实 property 和 function 顺序不重要, 因为它很聪明会识别出来的. 但是 duration 和 delay 就不可以搞错. 参考: MDN
Apply Multiple
transition: width 1s, height 1s; transition-property: width, height; transition-duration: 1s, 1s;
property, shorthand 写法都是加逗号
什么时候放 ?
有个 div width 100px
<div class="target">target</div>
.target { border: 2px solid red; width: 100px; }
hover 的时候 width change to 300px
.target:hover { width: 300px; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in; }
当 hover 的时候, 修改 width, 同时给予它 transition 逻辑.
把 transition 逻辑放到 hover 是可以的, 但是注意结尾的时候, 到 mouse leave 的时候 width 恢复到 100px 同时 transition 也移除了, 所以退回的动作没有 animation.
从这个例子可以看出来 Transition 的 work flow, 当 element 有 transition 属性时, 修改 CSS 就会有 animation. 如果没有就不会出现 animation.
所以呢, 比较常见的做法是一开始就给元素 transition 属性. 后续就操作其它 CSS 属性就可以了.
如果是要复杂一些的 animation, 比如有 2 step 的, 动态多一点的, 那么建议之间用 JS 的 animation 更直观.
JS Listen to Transition Event
transitionrun, transitionstart, transitioncancel, transitionend
run 是一开始就跑的, 比 start 还早.
cancel 是当 animation 没有结束, 但是属性又被修改了。
正常情况的顺序:run > start > end
切换 2 次情况下的顺序:run > start > cancel > run > start > cancel > run > start > end,中间 cancel 了 2 次。
参考: HTMLElement: transitionend event
当有 multiple transition 时,transitionend 会触发多次哦
transition-property: opacity, visibility;
transition-duration: 1s;
可以通过 TransitionEvent.propertyName 来判断是哪一个
Animations
@keyframes
animation 过程的 style
@keyframes example { from {background-color: red;} to {background-color: yellow;} }
@keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} }
可以写任何 style property, % 就是 duration 到那个 % 时要出什么 style
Percentage 例子说明:
CSS
h1::after { content: ''; width: 0; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255, 0, 0, 0.7); animation: overlay 3s ease infinite; }
它是一个 overlay, 开始时 width 0, left 0
left 0, width 70% 长这样
left 10% width 90%, 长这样
所以动画是
@keyframes overlay { 50% { width: 100%; left: 0; } 100% { width: 0%; left: 100%; } }
我一开始认为 50% 的时候不需要 left 0, 因为本来就是 0 丫. 结果是这样的
因为它变成了 0-100% duration 时, left 从 0 到 100%. 所以一开始 left 就往 100% 去了. 而正确的效果应该是 50% 的时候, left 依然要在 0.
animation-name, duration, delay, timing-function
div:hover { animation-name: example; animation-duration: 4s; animation-delay: 2s; animation-timing-function: ease-in-out; }
name 对应 @keyframes 的名字, duration, delay, timing-function 和 transition 一样.
timing-function の stpes()
除了常用的 easing function 还有一个叫 steps 的 timing function
我用一个例子说明, 假如我们要实现一个时钟, 秒针转动.
HTML
<div class="clock"> <div class="second"></div> </div>
CSS Style
.clock { width: 300px; height: 300px; border: 1px solid black; border-radius: 50% 50%; display: flex; justify-content: center; .second { width: 2px; height: 150px; background-color: black; transform-origin: bottom; animation: run 60s; @keyframes run { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } }
效果
它的秒针是一直在移动的, 这个我们常看到的时钟不太一样. 一般上是每一秒跳动一次, 而不是一直移动.
要做到这点就需要用到 steps function. 它的功能是切分多个 steps. 每一次跳动一个 step
在 animation 加上 steps
animation: run 60s steps(60, end);
切成 60 个 steps
效果
第一个是 end, 第二个是 start, 区别是在 step start 的时候给 style 还是 step end 的时候给 style. 因为第二个是 start, 所以它会先 apply style, 看起来就比第一个先启动.
animation-iteration-count
animation 跑完, 就会回到原本的 style. 要跑多几次就用 iteration
animation-iteration-count: 2;
animation-iteration-count: infinite; 无限次
animation-direction
normal, reverse, alternate, alternate-reverse
reverse 是从最后一个 @keyframes style 跑到第一个, 反过来执行.
alternate 是在最少跑 2 次才有用的, 第 1 次正常跑, 第 2 次 reverse 跑, 以此类推
alternate-reverse 是第一次跑 reverse, 第 2 次正常跑
animation-fill-mode
animation 跑完, 就会回到原本的 style.
by default, animation 的 style, 只会在 animation 过程中有效, 之前, 之后都不会有, 但 fill-mode 可以调.
animation-fill-mode: none,
forwards,
backwards,
both
forwards
是跑完 animation 后把最后一个 keyframs's style apply 去 element. (注: apply 了后, 涉及到 animation 的属性就被 lock 着了, 无法 set style 去修改了)
backwards 是当 delay 期间, 它会提前去拿 first keyframe's style 去 apply.
both 是 2 forwards + backwards
animation
shorthand property
animation: 3s ease-in 1s 2 reverse both paused slidein;
duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name (timeline 没有)
JS Listen to Animation
animationstart
animationend
animationcancel
animationiteration
Animation 和 Transition 的区别
transition 和 animation 的使用动机差挺多的.
如果是 style change 不想太突兀, 做点过渡, 这个叫 transition.
如果是, 想让一个东西"动"起来, 这叫 animation.
具体在使用上的区别:
transition 是先定义好过渡效果 duration ease, 然后修改 element 的 style 属性值.
animation 是先用 @keyframes 定义好动画过程中的 style, 然后 apply animation 并附上 duration ease.
transition 是后来加 style, 这个 style 就是 element 普通的 style, transition 结束它也不会消失.
animation 是先定义动画过程中的 style, 然后 apply 动画进去, 动画结束并不会影响 element 的 style (除非 fill-mode)
综上还是差挺远的.
冷知识 – Transition 对 height: auto / fit-content 无效
Inspec Animation
参考:
Youtube – How to show the Animations tab in the dev tools
stackoverflow – Is it possible to inspect CSS3 animation keyframes with a browser inspector?
Chrome 的 DevTools 可以很容易的 debug animation
开启
开启后, F5 refresh page.
这时, 就可以看到 animation records 了.
选择其中一个来 inspect
还可以手动控制速度哦
Edit @keyframes