css3过渡动画——transition属性

最新推荐文章于 2023-11-24 23:58:25 发布

均沾啊

最新推荐文章于 2023-11-24 23:58:25 发布

阅读量120

点赞数

文章标签： css3 css 动画

本文链接：https://blog.csdn.net/cjxs_/article/details/127522651

版权

css3过渡动画——transition属性

语法

transition: transition-proterty transition-duration transition-timing-function transition-delay;
transition: css样式  动画的执行时间  速度类型  动画的延迟时间;
 多个css属性用逗号隔开
 transition: transform 2s, background-color 2s;

注意：谁发生了属性的改变 就加在谁身上

属性

1、transition-proterty
- css样式：参与过渡的css属性名称|all表示所有属性
2、transition-duration
- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms
3、transition-timing-function
- 速度类型
  
  1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果
4、transition-delay
- 延迟时间：默认0s,单位s|ms
- <!DOCTYPE html>
  <html lang="en">
  
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {
  margin: 0;
  padding: 0;
  }
  
  .warp {
  width: 400px;
  height: 400px;
  background-color: pink;
  }
  
  .box {
  width: 200px;
  height: 200px;
  background-color: tomato;
  /* 参与过渡的css属性名称 */
  transition-property: width, height, background-color;
  /* 动画执行时间 */
  transition-duration: 2s;
  /* 速度类型 */
  transition-timing-function: linear;
  /* 延迟时间 */
  transition-delay: 2s;
  
  /* 复合写法 */
  transition: width 2s 2s, height 2s 2s, background-color 2s 2s;
  
  /* transition: all 1s linear 2s; */
  
  transition: 2s linear 2s;
  
  }
  
  .warp:hover .box {
  width: 300px;
  height: 300px;
  background-color: blue;
  }
  </style>
  </head>
  
  <body>
  <div class="warp">
  <div class="box"></div>
  </div>
  </body>
  
  </html>