css3 transition属性用法详解(教你用css3 transition实现过渡动画)

 分类:css3知识时间:2022-07-30 07:30:03点击:
css3 transition属性用法详解(教你用css3 transition实现过渡动画)网址:

今天教你用css3 transition实现过渡动画效果,css3 transition属性用法详解。核心知识是css3实现过渡动画的核心样式属性是transition,然后再配合常用的2D或3D转换,例如:rotate、scale、skew、translate3d等就可以实现我们业务开发中常用到的动画效果。

transition是用来指定需要过渡的属性名、过渡时间、过渡效果曲线及过渡延时时间

下表列出了所有的过渡属性:

属性

描述

transition-property

需要过渡的属性名

transition-duration

过渡时间,默认是 0

transition-timing-function

过渡效果曲线,默认是 "ease"

transition-delay

过渡延时时间,默认是 0

// 各个属性单独设置
div	{
  transition-property: scale; // 过度效果只影响宽度
  transition-duration: 1s; // 持续时间1秒
  transition-timing-function: linear; // 匀速动画
  transition-delay: 2s; // 动画延时2秒执行
}

// 一次性设置,效果和上面的一样
// 实际开发中一般都一次性设置
div {
  transition:width 1s scale 2s;
}

实际案例

1、鼠标移上去等比放大

<div class="demo"></div>

.demo {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  // transform变换时,0.3秒动画
  transition: transform 0.3s;
  cursor: pointer;
}

.demo:hover {
  // 鼠标移动上去的时候
  // scale等比宽度和高度等比放大1.2倍
  transform: scale(1.2, 1.2);
}

手把手教你Css3实现过渡动画

效果


2、鼠标移上去旋转360度

<div class="demo"></div>.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时,1秒动画
  transition: transform 1s;
  cursor: pointer;
}

.demo:hover {  // 鼠标移动上去的时候
  // rotate旋转360度
  transform: rotate(360deg);
}

手把手教你Css3实现过渡动画

效果


3、鼠标移上去向右下方移动

<div class="demo"></div>.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时,1秒动画
  transition: transform 1s;
  cursor: pointer;
}

.demo:hover {  // 鼠标移动上去的时候
  // translate向右移动50px,向下移动30px
  transform: translate(50px,30px);
}

手把手教你Css3实现过渡动画

效果


4、鼠标移上去x方向变形30度,y方向变形20度

<div class="demo"></div>.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时,1秒动画
  transition: transform 1s;
  cursor: pointer;
}

.demo:hover {  // 鼠标移动上去的时候
  // translatex变换方向变形30度,y方向变形20度
  transform: skew(30deg,20deg);
}

手把手教你Css3实现过渡动画

效果


5、3D动画旋转这里只举例了rotateY

还有其它的3D动画包括translate3d(x,y,z)、scale3d(x,y,z)、rotate3d(x,y,z,angle),大家也可以根据我这个例子,举一反三

<div class="demo"></div>.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // transform变换时,1秒动画
  transition: transform 1s;
  cursor: pointer;
}

.demo:hover {  // 鼠标移动上去的时候
  // translate,沿Y方向转360度
  transform: rotateY(360deg);
}

手把手教你Css3实现过渡动画

效果


6、其它变换过渡

css的很多属性都可以过渡变换的,这里举例width,其它的比例color、高度、top等都适应

<div class="demo"></div>.demo {  width: 100px;
  height: 100px;
  background-color: blueviolet;  // 宽度变换时,1秒动画
  transition: width 1s;
  cursor: pointer;
}

.demo:hover {  // 鼠标移动上去的时候
  // 宽度变200px
  width: 200px;
}

手把手教你Css3实现过渡动画

效果


好了,开发当中基本上能用到的过渡效果都在上面了

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: