过渡元素transition的那些事儿

来源：互联网发布：js鼠标悬停事件编辑：程序博客网时间：2024/06/05 11:26

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height:200px;border:1px solid red;float: left;margin:20px;text-align: center;line-height: 200px;}/*transion前面是需要改变的样式，后面是持续的时间*/.div1{color: blue;background:orange;transition: background 1s,color 1s;/*如果想有很多的样式需要过渡，一个一个写也太累的，那么就采用transition:all 0.5s*/}/*改变后的效果*/.div1:hover{color: red;background:green;}</style></head><body><div class="div1">hello world</div></body></html>

transion后面其实只需要两个值就可以，一个是想要变化的样式，一个是持续的时间。如果你需要改变的样式太多，那么就可以通过all来实现。这样的变换其实可以满足50%的需求。

下面在进行一点简单的补充，就是变换时候变换速度的控制：

ease-in-out：刚开始速度慢，然后加速，最后慢下来

linear:速度一直恒定

ease-in：过渡开始慢，然后以恒定的速度运行

ease-out：速度刚开始恒定，后面慢下来

cubic-bezier:贝塞尔曲线（感兴趣的可以研究）

使用方法如下：

transition:all 0.5s ease-in;

上面的大概可以满足80%的需求了，最后还有一点就是为这个动画添加延时，也就是在等待多久以后才执行，代码如下：

transition:all 0.5s ease-in 0.2s

阅读全文

0 0