transition详解

transition 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

transition 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing funtion，比如匀速地或先快后慢)。

语法

transition: <property> <duration> <timing-function> <delay>;

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

多个属性一起动画示例

html内容

<p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
<div class="box"></div>

css内容

.box {width: 100px;height: 100px;background-color: #0000FF;transition:width 2s, height 2s, background-color 2s, transform 2s;margin: 50px 0 0 100px;
}
.box:hover {width:200px;height:200px;background-color: #FFCCCC;transform:rotate(180deg);
}

示例传送门：https://skyfood.github.io/transition/demo1.html

当属性值列表长度不一致时

以 transition-property 的值列表长度为标准；

1、如果某个属性值列表长度短于 transition-property 的，则重复其值以长度一致，例如：

div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s;
}

将按下面这样处理：

div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s, 3s, 5s;
}

2、如果某个属性的值列表长于 transition-property 的，将被截短。例如：

div {transition-property: opacity, left;transition-duration: 3s, 5s, 2s, 1s;
}

将按下面这样处理：

div {transition-property: opacity, left;transition-duration: 3s, 5s;
}

检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend，在 WebKit 下是 webkitTransitionEnd。 transitionend 事件提供两个属性：

propertyName，字符串，指示已完成过渡的属性。
elapsedTime，浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 transition-delay 影响。

看一个示例：https://skyfood.github.io/transition/demo.html

transition详解相关推荐

html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
css transition兼容性,CSS3 Transition详解和使用
Transition 简介 Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性. transition-property 用于指定应用过渡属性的名称 transition-dur ...
CSS3过渡属性transition详解
拖了两天的更新诶,懈怠了懈怠了 transition蛮好玩的,可以实现由一个状态像另一个状态的动画过渡,无缝斜街的感觉,不多说啦,开始介绍属性吧~ 1.transition可以传4 / (4n)个参数 ...
CSS3 transition详解
D3 Transitions 简介: Css 的transition属性可以使CSS的值在一段时间内平滑的变化. Transition: 一般情况下,当CSS值发生变化时,其渲染结果会立刻发生变化.而 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
CSS transition（过渡效果）详解
CSS transition(过渡效果)详解通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
放大旋转 css3,CSS3详解：transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
html met详解转
2019独角兽企业重金招聘Python工程师标准>>> Meta标签详解,在网上转的,希望对大家有用引言您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中 ...
Linux 高可用（HA）集群之keepalived详解
大纲一.前言二.Keepalived 详解三.环境准备四.LVS+Keepalived 实现高可用的前端负载均衡器一.前言这篇文章是前几篇文章的总结,我们先简单的总结一下我们前面讲解的内容 ...

transition详解

transition详解相关推荐

最新文章

热门文章