-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:css3动画有哪些? #109
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
一、是什么
CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块
即指元素从一种样式逐渐过渡为另一种样式的过程
常见的动画效果有很多,如平移、旋转、缩放等等,复杂动画则是多个简单动画的组合
css
实现动画的方式,有如下几种:二、实现方式
transition 实现渐变动画
transition
的属性如下:其中
timing-function
的值有如下:注意:并不是所有的属性都能使用过渡的,如
display:none<->display:block
举个例子,实现鼠标移动上去发生变化动画效果
transform 转变动画
包含四个常用的功能:
一般配合
transition
过度使用注意的是,
transform
不支持inline
元素,使用前把它变成block
举个例子
可以看到盒子发生了旋转,倾斜,平移,放大
animation 实现自定义动画
animation
是由 8 个属性的简写,分别如下:CSS
动画只需要定义一些关键的帧,而其余的帧,浏览器会根据计时函数插值计算出来,通过
@keyframes
来定义关键帧因此,如果我们想要让元素旋转一圈,只需要定义开始和结束两帧即可:
from
表示最开始的那一帧,to
表示结束时的那一帧也可以使用百分比刻画生命周期
定义好了关键帧后,下来就可以直接用它了:
三、总结
参考文献
The text was updated successfully, but these errors were encountered: