css动画效果

transition

简介

• transition: property duration timing-function delay
• transition 是一个复合属性，包含了四个过渡属性
  transition-property: css属性名
  transition-duration: 过度时间
  transition-timing-function: 渐变函数值
  transition-delay: 延迟时间

写法

• 默认值分别为：all 0 ease 0

transition-property: none |all |property;

值为none时，没有属性会获得过渡效果，值为all时，所有属性都将获得过渡效果，值为指定的css属性应用过渡效果，多个属性用逗号隔开

transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);

ease渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)
ease-in渐快，匀速cubic-bezier(0.42,0,1,1)
ease-out匀速，减慢cubic-bezier(0,0,0.58,1)
ease-in-out和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
linear全程匀速cubic-bezier(0,0,1,1)

例子

• 有一个按钮,鼠标效果为上移50px

<div class="wc-btn">
    <button class="dh-btn">动画效果</button>
</div>

<style>
.dh-btn {
  width: 200px;
  height: 100px;
  background-color: royalblue;
  border-radius: 10px;
  cursor: pointer;
 
  /* 再原状态写也写上,可以使鼠标离开也有相应的过渡效果 */
  transition: all 3s linear 0;
  -moz-transition:all 3s linear 0; /* Firefox 4 */
  -webkit-transition: all 3s linear 0; /* Safari 和 Chrome */
  -o-transition: all 3s linear 0; /* Opera */
}

.dh-btn:hover {
  transform: translate(0px, -50px);

  transition: all 3s linear;
  -moz-transition:all 3s linear 0; /* Firefox 4 */
  -webkit-transition: all 3s linear 0; /* Safari 和 Chrome */
  -o-transition: all 3s linear 0; /* Opera */
}
</style>

https://www.w3school.com.cn/cssref/pr_transition.asp

animation

https://www.w3school.com.cn/cssref/pr_animation.asp

例子

• forwards是使动画停再最后的的那个画面

<style>
.dh-btn {
  width: 200px;
  height: 100px;
  background-color: royalblue;
  border-radius: 10px;
  cursor: pointer;

  /* 鼠标离开效果*/
  animation: codenot 1s linear forwards;
}

.dh-btn:hover {
  animation: code 1s linear forwards;
}
 /* 创建动画*/
@keyframes code {
  0% {
    transform: translate(0px, 0px);
  }
  33% {
    transform: translate(0px, -5px);
  }
  66% {
    transform: translate(0px, -10px);
  }
  100% {
    transform: translate(0px, -15px);
  }
}

@keyframes codenot {
  0% {
    transform: translate(0px, -15px);
  }
  33% {
    transform: translate(0px, -10px);
  }
  66% {
    transform: translate(0px, -5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
</style>