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(倒放)）