1、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
大多数显示器的默认频率是60hz(即一秒刷新60次),每刷新一次时间需要1000ms/60=16.7ms,所以理论上最小时间间隔是16.7ms。
2、CSS3动画(简单动画的实现,如旋转等)。
(1)依靠CSS3中提出的三个属性:transition、transform、animation。 (2)transition:设置四个过渡属性,transition: property duration timing-function delay;属性名称、周期时间、速度曲线、开始时间。 (3)transform:对元素进行旋转、缩放、移动或倾斜,包含rotate(angle)、scale(x,y)(2D缩放)、skew(angle)(倾斜角度)、translate(平移)。 (4)animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-name,animation-duration(执行时间)、animation-timing-function("ease",动画的速度曲线)、animation-delay(0,动画开始时间)、animation-iteration-count(1,播放次数)、animation-direction("normal",动画是否在下一周期逆向地播放)。
当在 @keyframes 中创建动画时,必须把它捆绑到某个选择器,否则不会产生动画效果。
必须规定以下两项动画属性,即可将动画绑定到选择器:
规定动画的名称规定动画的时长示例:
@keyframes myfirst { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }3. link与@import的区别。
建议使用link标签,慎用@import方式。
(1)功能:@import只能引入css样式表;link标签不仅可以引入css文件,还可以设置rss、rel属性。
(2)兼容性:@import在IE5+才能使用;link兼容性更好,不存在兼容性问题。
(3)加载顺序:@import在页面全部加载完才加载css文件;link则与页面同时加载css文件。
(4)DOM操作:js不能通过DOM操作插入@import;但是可以插入link标签。