css3过渡

「爱情、让人受尽委屈。」 2022-04-16 01:49 279阅读 0赞

css过渡  
css过渡为一种状态到另外一种状态的变换

# transition 过渡 #

transition 为一个简写属性，是一个transition-property （定义过渡的属性的名称）以及 transition-duration （定义过渡属性的所需动画的时间）和 transition-timing-function （描述中间值如何计算的） 以及 transition-delay （描述过渡效果开始作用之前需要等待的时间）

## transition-property ##

transition-property 定义过渡属性的名称  
即指定引用过渡属性的名称

> 例如要对width属性应用过渡动画，则其该属性的值为width。规定的属性动画值有在这 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS\_animated\_properties][https_developer.mozilla.org_zh-CN_docs_Web_CSS_CSS_animated_properties] 该列表列出来的属性为可动画的属性。

![此处输入图片的描述][11.gif]

其css如下

div {
        width:300px;
        height:400px;
        background:#698771;
    }
    div:hover {
        background:#ededed;
        transition-property:background;
    }

html 如下

[原文链接][Link 1]

[https_developer.mozilla.org_zh-CN_docs_Web_CSS_CSS_animated_properties]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
[11.gif]: https://melovemingming-1253878077.cos.ap-chengdu.myqcloud.com/blog-image/2018/08/09/11.gif
[Link 1]: http://click.aliyun.com/m/1000024168/

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3过渡效果（CSS3）

CSS3过渡效果（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

左手的ㄟ右手/ 2023年10月03日 13:46/ 0 赞/ 6 阅读

相关 CSS3-过渡动画

CSS3 中的 `transition` 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。 `transition` 属性是一个综合属性，可以简写也可以单独设

谁践踏了优雅/ 2023年07月02日 12:26/ 0 赞/ 152 阅读

相关 CSS3新增过渡属性

过渡与hover搭配使用 transition:需要过渡的属性过渡所需的时间运动曲线何时开始（运动曲线何时开始可省略）需要过渡多个属性时候

悠悠/ 2022年12月18日 03:56/ 0 赞/ 161 阅读

相关 CSS3过渡和动画

1.过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -web

怼烎@/ 2022年09月21日 05:37/ 0 赞/ 229 阅读

相关 CSS3之过渡Transition

　　CSS3也有着非常强大的属性，那就是过渡——Transition。过渡——Transition在W3C的描述：“css的transition允许css的属性值在一定的时间区

系统管理员/ 2022年09月08日 03:54/ 0 赞/ 277 阅读

相关 css3过渡

css过渡 css过渡为一种状态到另外一种状态的变换 transition 过渡 transition 为一个简写属性，是一个transition-property

「爱情、让人受尽委屈。」/ 2022年04月16日 01:49/ 0 赞/ 280 阅读

相关 CSS3 过渡之transition

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

浅浅的花香味﹌/ 2022年03月18日 13:28/ 0 赞/ 347 阅读

相关 CSS3的过渡属性

关于transition-timing-function，它有如下关键字： ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25

小咪咪/ 2022年01月10日 16:47/ 0 赞/ 521 阅读

相关 CSS3过渡——transition

　　让CSS属性值在一定时间内平滑过渡 transition属性值 1.property 　　检索/设置对象中参与过渡的属性　　可设置none（不设置过渡）、

矫情吗；*/ 2021年10月19日 11:52/ 0 赞/ 410 阅读

相关 CSS3实现文字过渡移动

1.在需要移动的对象上加上a标签，并定义CSS <a><img src="/skin/images/ico-weixin.png" /><span>微信平台</span...

你的名字/ 2021年03月21日 02:00/ 0 赞/ 735 阅读