css 样式动画 特效 Animation简单使用
animation与@keyframes配合使用
实现按钮类似果冻的特效
.meal_item_bottom_right:hover {
// -webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ccc;
// box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ccc;
border-radius: 5px;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
}
@keyframes gelatine {
0% , 100% {
transform: scale(1, 1);
}
25% {
transform: scale(0.8, 1);
}
50% {
transform: scale(1.2, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}
主要是通过Css3的Animation 实现简单的动画效果 ,也可以使用 transition
animation
animation: name duration timing-function delay iteration-count direction;
name : @keyframes name {} //@keyframes 后接的名称
duration 为运动时长 以秒或毫秒计。
timing-function 规定动画的速度曲线。(默认ease
- linear 动画从头到尾的速度是相同的
- ease 默认。动画以低速开始,然后加快,在结束前变慢。
- ease-in 动画以低速开始
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
delay 规定在动画开始之前的延迟。 以秒或毫秒计。
iteration-count 规定动画应该播放的次数。(n n次播放/infinite 无限次播放)
direction 规定是否应该轮流反向播放动画 (normal (默认正常播放)/alternate(倒放))