transition:all 1s;这里是啥意思不懂

来源:4-2 CSS动画-命名约定以及测试脚本

慕函数4234673

2020-01-09 17:19:03

transition:all 1s;这里是啥意思不懂,请老师举个例子解释下

写回答

1回答

好帮手慕粉

2020-01-09

同学你好,transition 属性设置元素的过渡效果,当元素从一种样式变换为另一种样式时为元素添加效果。

1、transition 属性是一个简写属性,用于设置四个过渡属性:

transition-property:规定设置过渡效果的 CSS 属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。

建议同学再复习下相关课程:https://class.imooc.com/course/765

2、我们可以举个例子看下。

(1)不加transition:

http://img.mukewang.com/climg/5e16f4bf09400b2905330391.jpg

当鼠标移上div时。div会突然放大2倍。

(2)加transition:

http://img.mukewang.com/climg/5e16f4f809c3790c05690459.jpg

当鼠标移上时,div会在2秒之内放大2倍。由于老师只能截图不能录制动态的图,所以同学自己敲下代码看下实现结果。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程