CSS3动画-transition、animation、transform（translate/scale/rotate）

疆~

已于 2023-04-19 11:22:28 修改

阅读量3.4k

点赞数 1

分类专栏： Javascript/CSS/HTML 文章标签： css3 动画 css

于 2021-03-19 19:22:58 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/115012169

版权

Javascript/CSS/HTML 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

一、transition（过渡）

1、transition-duration

2、transition-property

3、transition-timing-function

4、transition-delay

二、animation

1、@keyframes

2、animation-timing-function

3、animation-delay

4、animation-iteration-count：检索或设置对象动画的循环次数

5、animation-play-state：检索或设置对象动画的状态（running\paused）

6、animation-direction；是否反向运动

一、transition（过渡）

transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-property 指定CSS属性的name，transition效果
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

1、transition-duration


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  transition-duration: 1s;

  &:hover {
    width: 4rem;
    height: 4rem;
  }
}
</style>

2、transition-property


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  transition-duration: 1s;
  transition-property: height;

  &:hover {
    width: 4rem;
    height: 4rem;
  }
}
</style>

3、transition-timing-function

linear（默认属性）规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。匀速
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 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。慢-快-慢
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。自定义


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  transition-duration: 1s;
  transition-timing-function: ease-in-out;

  &:hover {
    width: 4rem;
    height: 4rem;
  }
}
</style>

4、transition-delay


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  transition-delay: 1s;

  &:hover {
    width: 4rem;
    height: 4rem;
  }
}
</style>

几个属性的简写，如下：


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  transition: all 1s ease-in-out 2s;//动画持续一秒，缓进缓出，并在两秒钟后开始执行

  &:hover {
    width: 4rem;
    height: 4rem;
  }
}
</style>

二、animation

@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画的延迟时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态

1、@keyframes


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  &:hover {
    animation: mymove 2s;
  }
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

其实上面的animation: mymove 2s;就是animation-name:mymove 和 animation-duration:2s; 的简写形式

2、animation-timing-function

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  &:hover {
    animation: mymove 2s;
    animation-timing-function: ease-in-out;
  }
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

3、animation-delay


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  &:hover {
    animation: mymove 2s;
    animation-delay: 1s;
  }
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

4、animation-iteration-count：检索或设置对象动画的循环次数

animation-iteration-count: infinite;表示无限循环


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  animation: mymove 2s;
  animation-iteration-count: infinite;
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

当然，还可以指定具体的循环次数，如下：


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  animation: mymove 2s;
  animation-iteration-count: 3;//只循环三次
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

5、animation-play-state：检索或设置对象动画的状态（running\paused）


<template>
  <div class="test"></div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  mounted() {
    setTimeout(() => {
      this.$refs.ref_test.style.animationPlayState = "paused";
    }, 3000);
    setTimeout(() => {
      this.$refs.ref_test.style.animationPlayState = "running";
    }, 5000);
  }
};
</script>
<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  animation: mymove 2s;
  animation-iteration-count: 3;//只循环三次
}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

6、animation-direction；是否反向运动

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。


<template>
  <div class="test"></div>
</template>

<style lang="scss" scoped>
.test {
  background-color: orange;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

  animation: mymove 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}
@keyframes mymove {
  0% {
    width: 2rem;
    height: 2rem;
  }
  50% {
    width: 4rem;
    height: 4rem;
  }
  100% {
    width: 2rem;
    height: 2rem;
    margin-left: 5rem;
  }
}
</style>

三、transform

rotate


<template>
  <img src="./二哈.jpg" />
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;
  animation: myRotate 2s infinite linear;
}
@keyframes myRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

rotateX

 
<template>
  <img src="./二哈.jpg" />
</template>
 
<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;
  animation: myRotateX 2s infinite linear;
}
@keyframes myRotateX {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(360deg);
  }
}
</style>

rotateY


<template>
  <img src="./二哈.jpg" />
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;
  animation: myRotateY 2s infinite linear;
}
@keyframes myRotateY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
</style>

translate

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myTranslate 2s infinite linear;
}
@keyframes myTranslate {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(8rem, 8rem);
  }
}
</style>

translateX

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myTranslateX 2s infinite linear;
}
@keyframes myTranslateX {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(8rem);
  }
}
</style>

translateY

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myTranslateY 2s infinite linear;
}
@keyframes myTranslateY {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(8rem);
  }
}
</style>

scale

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myScale 2s infinite linear;
}
@keyframes myScale {
  0% {
    transform: scale(0, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}
</style>

scaleX

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myScaleX 2s infinite linear;
}
@keyframes myScaleX {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
</style>

scaleY

<template>
  <div>
    <img src="./二哈.jpg" />
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 3rem;
  height: 4rem;
  border-radius: 50%;

  animation: myScaleY 2s infinite linear;
}
@keyframes myScaleY {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
</style>

疆~

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画-transition、animation、transform（translate/scale/rotate）

目录一、transition（过渡）1、transition-duration2、transition-property3、transition-timing-function4、transition-delay二、animation1、@keyframes2、animation-timing-function3、animation-delay4、animation-iteration-count：检索或设置对象动画的循环次数5、animation-pla...
复制链接

扫一扫

专栏目录