每日学习css之transition的使用

最新推荐文章于 2022-10-25 11:32:46 发布

平凡的人平凡的世界

最新推荐文章于 2022-10-25 11:32:46 发布

阅读量151

点赞数

分类专栏： css 前端 css3 文章标签： css css3 transition

本文链接：https://blog.csdn.net/qingchundezhanyi/article/details/103984890

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

transition: property duration timing-function delay;

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

例子：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 1s;

}

div:hover
{
width:500px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

transition-property：可以是width，height，transform等

transition-duration：transition-property某个属性持续的时间，秒或者毫秒，例如5s，4s等

transition-timing-function：属性规定过渡效果的速度曲线。一般linear,ease,ease-in,ease-out,ease-in-out是够用的

transition-delay：属性规定过渡效果何时开始，比如设置transition：width 3 ease 1；width在1秒后经过3秒的ease的方式过渡

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezie

cubic-bezier的介绍可以参考这篇文章

https://blog.csdn.net/wjnf012/article/details/78795573

平凡的人平凡的世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日学习css之transition的使用

transition: property duration timing-function delay;transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-...
复制链接

扫一扫