初学animation
什么是animation?
animation是css3中新增的一个属性,可以定义元素的动态效果
有哪些具体属性
CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
来动手写个例子
animation: 3s ease-in 1s infinite reverse both running slidein;
这是MDN上的例子,主要是属性定义了动画过程的时间,运动曲线,延迟时间,是否反复,是否复位,属性名称等等。
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes是什么?
@keyframes是定义动画名称的,我们可以自己定义动画,将运动轨迹,颜色变换,3d变换;
只要是你想的,都可以
我们还可以结合现有库定义好的动态效果来完成自己想要的动画。
不过现有的都是比较基础的效果,要想做出高大上的动效,还要我们去发挥丰富的想象力!