html中transtion属性,CSS3 transition 属性

一时失言乱红尘 2022-10-06 07:54 212阅读 0赞

transition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”

一、transition语法：

transition:\[||||

||||

||||

||\]

transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition-duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition-delay。

1、变化的属性：transition-property

transition-property :none | all | \[\]\[','\]\* ;

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；indent元素属性名，其对应的类型如下：

2、动画时间：transition-duration

transition-duration : \[,time\]\*;

transition-duration是动画执行的时间，单位为s(秒)，比如0.1秒可以写成“0.1s”或者“.1s”，它可以作用于任何元素，包括:before和:after伪元素。

3、动画执行的方式：transition-timing-function

transition-timing-function :ease | linear | ease-in | ease-out | ease-in-out;

ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。

4、动画延迟：transition-delay

transition-delay : \[,time\]\* ;

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition动画效果，取值同transition-duration。

二、实例动画

step1：改变字体颜色

# [雨打浮萍][Link 1] #

h1 a\{

color:\#03c;

text-decoration:none;

\-webkit-transition:color .5s ease-in-out;

\-moz-transition:color .5s ease-in-out;

\-o-transition:color .5s ease-in-out;

transition:color .5s ease-in-out;

\}

h1 a:hover\{

color:\#f60;

\}

step2：改变背景颜色

## 专注于web前端开发 ##

h2:hover\{

\-webkit-transition:background-color 0.5s linear;

\-moz-transition:background-color 0.5s linear;

\-o-transition:background-color 0.5s linear;

transition:background-color 0.5s linear;

background-color:\#ccc;

\}

step3：转换多个属性

作用transition进行多个属性转换：

辛苦遭逢起一经，干戈寥落四周星。山河破碎风飘絮，

身世浮沉雨打萍。惶恐滩头说惶恐，零丁洋里叹零丁。

人生自古谁无死？留取丹心照汗青

.div \{

padding:5px;

color:\#fff;

background-color:\#666;

\-webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;

\-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;

\-o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;

transition:color 1s ease-in-out, background-color 0.5s ease-in-out;

\}

.div:hover \{

color:\#333;

background-color:\#ccc;

\}

渐变效果还有另外一种写法：

.div \{

\-webkit-transition:all 1s ease-in-out;

\-moz-transition:all 1s ease-in-out;

\-o-transition:all 1s ease-in-out;

transition:all 1s ease-in-out;

\}

第一种写法里面把各个属性都写了出来，而第二种里面用all代替，也就是变换所有属性。

[Link 1]: http://www.rainleaves.com

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS3:text-shadow属性、word-wrap属性、transform属性、transition属性、animation属性、3D变换：transform-style:preserve-3d

text-shadow属性： text-shadow属性:水平偏移垂直偏移阴影大小颜色 word-wrap属性： word-wrap属性：允许长单词、URL

浅浅的花香味﹌/ 2024年03月24日 16:08/ 0 赞/ 32 阅读

相关 html5 和css3 新增属性

HTML5和CSS3新增属性新增选择器 E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 E:nth-of-type(n)：匹配父元素的第n个

Dear 丶/ 2023年06月09日 14:21/ 0 赞/ 18 阅读

相关 HTML5——CSS学习笔记（15）css3属性

CSS3属性文本阴影属性 text-shadow 说明：水平、垂直阴影的位置允许负值可进行多阴影设置(逗号分隔的方式) 文本换行

快来打我*/ 2022年12月15日 00:57/ 0 赞/ 277 阅读

相关 html 变形属性,CSS3中设置3D变形的transform-style属性详解

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。 transform-sty

超、凢脫俗/ 2022年10月06日 08:52/ 0 赞/ 201 阅读

相关 html中transtion属性,CSS3 transition 属性

transition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状

一时失言乱红尘/ 2022年10月06日 07:54/ 0 赞/ 213 阅读

相关 css3属性

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2022年09月07日 03:50/ 0 赞/ 226 阅读

相关 html5中的CSS属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年07月20日 15:11/ 0 赞/ 180 阅读

相关【CSS基础】css3 transition过渡属性<四>

transition 过渡，顾名思义就是说一种变化是循序渐进的走过去，而不是瞬间变化(博主的烂理解)。请查看mdn的解释： [transition][] 实际上 tra

港控/mmm°/ 2022年07月14日 06:50/ 0 赞/ 233 阅读

相关 CSS3中Transition属性详解以及示例分享

1、transition-property的语法 \[css\] transition-property :all(所有属性改变) || \[attr\] (指定要运动

淡淡的烟草味﹌/ 2021年11月22日 09:50/ 0 赞/ 303 阅读

相关 CSS3 transition 四大属性

![SouthEast][] 属性定义及使用说明 transition属性是一个速记属性有四个属性：t

淩亂°似流年/ 2021年09月15日 06:30/ 0 赞/ 387 阅读