045_CSS3过渡

1. 通过CSS3, 我们可以在不使用Flash动画或JavaScript的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果。

2. 过渡属性

3. transition属性

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

transition-property
transition-duration
transition-timing-function
transition-delay

3.2. 请始终设置 transition-duration属性, 否则时长为0, 就不会产生过渡效果。

3.3. 默认值

3.4. 可能值

4. transition-property属性

4.1. transition-property属性规定应用过渡效果的CSS属性的名称。

4.2. 默认值

4.3. 可能值

5. transition-duration属性

5.1. transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

5.2. 默认值

5.3. 可能值

6. transition-timing-function属性

6.1. transition-timing-function属性规定过渡效果的速度曲线。

6.2. 该属性允许过渡效果随着时间来改变其速度。

6.3. 默认值

6.4. 可能值

6.5. 实例

#div1 {transition-timing-function: linear;
}
#div2 {transition-timing-function: ease;
}
#div3 {transition-timing-function: ease-in;
}
#div4 {transition-timing-function: ease-out;
}
#div5 {transition-timing-function: ease-in-out;
}

6.6. cubic-bezier实例

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);
}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);
}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);
}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);
}

7. transition-delay属性

7.1. transition-delay属性规定过渡效果何时开始。

7.2. transition-delay值以秒或毫秒计。

7.3. 默认值

7.4. 可能值

8. 例子

8.1. 代码

<!DOCTYPE html>
<html><head><title>CSS3过渡</title><meta charset="utf-8" /><style type="text/css">div {margin: 40px;width: 100px;height: 100px;background: yellow;transition: width 1s linear 0s, height 2s, transform 2s;}div:hover {width: 200px;height: 200px;transform: rotate(180deg);}</style></head><body><div>请把鼠标指针放到黄色的div元素上, 来查看过渡效果。</div></body>
</html>

8.2. 效果图

045_CSS3过渡相关推荐

从C到C++过渡的3个原因
从C到C++过渡的3个原因 3 reasons to transition from C to C++ 几十年来,嵌入式软件工程师们一直在争论他们是否应该使用C或C++.根据2019年嵌入式市场调查, ...
android 官方默认动画,Android动画一：Activity过渡动画详细实现原理
虽然 Android 5.0 之后推出了新的过渡动画方式,但通常只是用于特定的场合使用,activity.overridePendingTransition() 通用方式的过渡动画还是很常用. 原理分 ...
Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡
使用过渡效果,可以优化用户体验,Vue给我们封装了一个很好用的组件,专门用来处理过渡效果,下面我们来看看怎么使用它: Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组 ...
几行代码实现神奇移动的过渡动画
1.效果如图: 2.实现: 假设需求为如上图,点击ViewController01后,ViewController01上的两张图片,移动到ViewContoller02中,其实两个ViewContro ...
自定义Push和Pop过渡动画
一.效果和源码本文介绍如何实现一个NavigationController的自定义Push和Pop过渡动画,运行效果如下: 源码:https://github.com/dolacmeng/Trans ...
framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序
framer x使用教程 The web is vast and it's full of static websites and apps. But just because those apps ...
软件开发向大数据开发过渡_如果您是过渡到数据科学的开发人员，那么这里是您的最佳资源...
软件开发向大数据开发过渡 by Cecelia Shao 邵Ce It seems like everyone wants to be a data scientist these days - fr ...
仅用2年过渡到自研ARM芯片，苹果的底气从何而来？
作者 | Steven Sinofsky 译者 | 弯月,责编 | 屠敏题图 | 东方 IC 出品 | CSDN(ID:CSDNnews) 今年 WWDC 2020 上,苹果宣布自研 ARM 芯片 ...
极客新闻——19、如何从单体架构平滑过渡到微服务
本文笔记全部来自<极客新闻>--新鲜的技术资讯.权威的趋势剖析.别样的技术洞察一旦决定在开发实践中引入微服务架构,如何将积累下来的庞大的巨无霸系统润物细无声的过渡到微服务架构将是一个巨大 ...

045_CSS3过渡

045_CSS3过渡相关推荐

最新文章

热门文章