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

    动画效果

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

animation

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

例子

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