devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Monodyee | 2024-03-18 23:57:56

赞

踩

css动画

目录

一、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；是否反向运动

三、transform

rotate

rotateX

rotateY

translate

translateX

translateY

scale

scaleX

scaleY

 

一、transition（过渡）

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

1、transition-duration 

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   transition-duration: 1s;
  14.  
  15.   &:hover {
  16.     width: 4rem;
  17.     height: 4rem;
  18.   }
  19. }
  20. </style>

2、transition-property

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   transition-duration: 1s;
  14.   transition-property: height;
  15.  
  16.   &:hover {
  17.     width: 4rem;
  18.     height: 4rem;
  19.   }
  20. }
  21. </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 之间的数值。    自定义
     

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   transition-duration: 1s;
  14.   transition-timing-function: ease-in-out;
  15.  
  16.   &:hover {
  17.     width: 4rem;
  18.     height: 4rem;
  19.   }
  20. }
  21. </style>

4、transition-delay

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   transition-delay: 1s;
  14.  
  15.   &:hover {
  16.     width: 4rem;
  17.     height: 4rem;
  18.   }
  19. }
  20. </style>

几个属性的简写，如下：

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   transition: all 1s ease-in-out 2s;//动画持续一秒，缓进缓出，并在两秒钟后开始执行
  14.  
  15.   &:hover {
  16.     width: 4rem;
  17.     height: 4rem;
  18.   }
  19. }
  20. </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

 

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   &:hover {
  14.     animation: mymove 2s;
  15.   }
  16. }
  17. @keyframes mymove {
  18.   0% {
  19.     width: 2rem;
  20.     height: 2rem;
  21.   }
  22.   50% {
  23.     width: 4rem;
  24.     height: 4rem;
  25.   }
  26.   100% {
  27.     width: 2rem;
  28.     height: 2rem;
  29.     margin-left: 5rem;
  30.   }
  31. }
  32. </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 的数值。
     

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   &:hover {
  14.     animation: mymove 2s;
  15.     animation-timing-function: ease-in-out;
  16.   }
  17. }
  18. @keyframes mymove {
  19.   0% {
  20.     width: 2rem;
  21.     height: 2rem;
  22.   }
  23.   50% {
  24.     width: 4rem;
  25.     height: 4rem;
  26.   }
  27.   100% {
  28.     width: 2rem;
  29.     height: 2rem;
  30.     margin-left: 5rem;
  31.   }
  32. }
  33. </style>

3、animation-delay

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   &:hover {
  14.     animation: mymove 2s;
  15.     animation-delay: 1s;
  16.   }
  17. }
  18. @keyframes mymove {
  19.   0% {
  20.     width: 2rem;
  21.     height: 2rem;
  22.   }
  23.   50% {
  24.     width: 4rem;
  25.     height: 4rem;
  26.   }
  27.   100% {
  28.     width: 2rem;
  29.     height: 2rem;
  30.     margin-left: 5rem;
  31.   }
  32. }
  33. </style>

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

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

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: mymove 2s;
  14.   animation-iteration-count: infinite;
  15. }
  16. @keyframes mymove {
  17.   0% {
  18.     width: 2rem;
  19.     height: 2rem;
  20.   }
  21.   50% {
  22.     width: 4rem;
  23.     height: 4rem;
  24.   }
  25.   100% {
  26.     width: 2rem;
  27.     height: 2rem;
  28.     margin-left: 5rem;
  29.   }
  30. }
  31. </style>

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

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: mymove 2s;
  14.   animation-iteration-count: 3;//只循环三次
  15. }
  16. @keyframes mymove {
  17.   0% {
  18.     width: 2rem;
  19.     height: 2rem;
  20.   }
  21.   50% {
  22.     width: 4rem;
  23.     height: 4rem;
  24.   }
  25.   100% {
  26.     width: 2rem;
  27.     height: 2rem;
  28.     margin-left: 5rem;
  29.   }
  30. }
  31. </style>

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

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5. <script>
  6. export default {
  7.   name: "",
  8.   components: {},
  9.   data() {
  10.     return {};
  11.   },
  12.   mounted() {
  13.     setTimeout(() => {
  14.       this.$refs.ref_test.style.animationPlayState = "paused";
  15.     }, 3000);
  16.     setTimeout(() => {
  17.       this.$refs.ref_test.style.animationPlayState = "running";
  18.     }, 5000);
  19.   }
  20. };
  21. </script>
  22. <style lang="scss" scoped>
  23. .test {
  24.   background-color: orange;
  25.   width: 2rem;
  26.   height: 2rem;
  27.   border-radius: 50%;
  28.  
  29.   animation: mymove 2s;
  30.   animation-iteration-count: 3;//只循环三次
  31. }
  32. @keyframes mymove {
  33.   0% {
  34.     width: 2rem;
  35.     height: 2rem;
  36.   }
  37.   50% {
  38.     width: 4rem;
  39.     height: 4rem;
  40.   }
  41.   100% {
  42.     width: 2rem;
  43.     height: 2rem;
  44.     margin-left: 5rem;
  45.   }
  46. }
  47. </style>

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

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

  1.  
  2. <template>
  3.   <div class="test"></div>
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. .test {
  8.   background-color: orange;
  9.   width: 2rem;
  10.   height: 2rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: mymove 2s;
  14.   animation-iteration-count: infinite;
  15.   animation-direction: alternate;
  16.  
  17. }
  18. @keyframes mymove {
  19.   0% {
  20.     width: 2rem;
  21.     height: 2rem;
  22.   }
  23.   50% {
  24.     width: 4rem;
  25.     height: 4rem;
  26.   }
  27.   100% {
  28.     width: 2rem;
  29.     height: 2rem;
  30.     margin-left: 5rem;
  31.   }
  32. }
  33. </style>

三、transform

rotate

  1.  
  2. <template>
  3.   <img src="./二哈.jpg" />
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. img {
  8.   width: 3rem;
  9.   height: 4rem;
  10.   border-radius: 50%;
  11.   animation: myRotate 2s infinite linear;
  12. }
  13. @keyframes myRotate {
  14.   0% {
  15.     transform: rotate(0);
  16.   }
  17.   100% {
  18.     transform: rotate(360deg);
  19.   }
  20. }
  21. </style>

 

 

rotateX

  1.  
  2. <template>
  3.   <img src="./二哈.jpg" />
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. img {
  8.   width: 3rem;
  9.   height: 4rem;
  10.   border-radius: 50%;
  11.   animation: myRotateX 2s infinite linear;
  12. }
  13. @keyframes myRotateX {
  14.   0% {
  15.     transform: rotateX(0);
  16.   }
  17.   100% {
  18.     transform: rotateX(360deg);
  19.   }
  20. }
  21. </style>

rotateY

  1.  
  2. <template>
  3.   <img src="./二哈.jpg" />
  4. </template>
  5.  
  6. <style lang="scss" scoped>
  7. img {
  8.   width: 3rem;
  9.   height: 4rem;
  10.   border-radius: 50%;
  11.   animation: myRotateY 2s infinite linear;
  12. }
  13. @keyframes myRotateY {
  14.   0% {
  15.     transform: rotateY(0);
  16.   }
  17.   100% {
  18.     transform: rotateY(360deg);
  19.   }
  20. }
  21. </style>

translate

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myTranslate 2s infinite linear;
  14. }
  15. @keyframes myTranslate {
  16.   0% {
  17.     transform: translate(0, 0);
  18.   }
  19.   100% {
  20.     transform: translate(8rem, 8rem);
  21.   }
  22. }
  23. </style>

translateX

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myTranslateX 2s infinite linear;
  14. }
  15. @keyframes myTranslateX {
  16.   0% {
  17.     transform: translateX(0);
  18.   }
  19.   100% {
  20.     transform: translateX(8rem);
  21.   }
  22. }
  23. </style>

translateY

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myTranslateY 2s infinite linear;
  14. }
  15. @keyframes myTranslateY {
  16.   0% {
  17.     transform: translateY(0);
  18.   }
  19.   100% {
  20.     transform: translateY(8rem);
  21.   }
  22. }
  23. </style>

scale

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myScale 2s infinite linear;
  14. }
  15. @keyframes myScale {
  16.   0% {
  17.     transform: scale(0, 0);
  18.   }
  19.   100% {
  20.     transform: scale(1, 1);
  21.   }
  22. }
  23. </style>

scaleX

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myScaleX 2s infinite linear;
  14. }
  15. @keyframes myScaleX {
  16.   0% {
  17.     transform: scaleX(0);
  18.   }
  19.   100% {
  20.     transform: scaleX(1);
  21.   }
  22. }
  23. </style>

scaleY

  1. <template>
  2.   <div>
  3.     <img src="./二哈.jpg" />
  4.   </div>
  5. </template>
  6.  
  7. <style lang="scss" scoped>
  8. img {
  9.   width: 3rem;
  10.   height: 4rem;
  11.   border-radius: 50%;
  12.  
  13.   animation: myScaleY 2s infinite linear;
  14. }
  15. @keyframes myScaleY {
  16.   0% {
  17.     transform: scaleY(0);
  18.   }
  19.   100% {
  20.     transform: scaleY(1);
  21.   }
  22. }
  23. </style>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号