css3动画 --- Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。

其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

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

可动画属性的列表是：

-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color
all
backdrop-filter
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-end-end-radius
border-end-start-radius
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-start-end-radius
border-start-start-radius
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
box-shadow
caret-color
clip
clip-path
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-variation-settings
font-weight
gap
grid-column-gap
grid-gap
grid-row-gap
grid-template-columns
grid-template-rows
height
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
left
letter-spacing
line-clamp
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
mask
mask-border
mask-position
mask-size
max-height
max-lines
max-width
min-height
min-width
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
rotate
row-gap
scale
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-coordinate
scroll-snap-destination
scrollbar-color
shape-image-threshold
shape-margin
shape-outside
tab-size
text-decoration
text-decoration-color
text-emphasis
text-emphasis-color
text-indent
text-shadow
top
transform
transform-origin
translate
vertical-align
visibility
width
word-spacing
z-index
zoom

属性详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

例子：

<body><p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p><div class="box"></div>
</body>.box {border-style: solid;border-width: 1px;display: block;width: 100px;  /*初始值*/height: 100px;  /*初始值*/background-color: #0000FF;  /*初始值*/-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;transition:width 2s, height 2s, background-color 2s, transform 2s;
}
/*鼠标悬浮的时候触发动画样式*/
.box:hover {background-color: #FFCCCC;  /*在2s内变成#FFCCCC*/width:200px;  /*在2s内变成200*/height:200px;  /*在2s内变成200*/-webkit-transform:rotate(180deg);transform:rotate(180deg);  /*在2s内旋转180度*/
}

transition没有无限循环。

transition是由多个属性值组成的简写属性。依次包括：

transition-property指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。

transition-duration指定过渡的时长。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。

transition-timing-function CSS属性受到transition的影响，会产生不断变化的中间值，而transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。这条加速度曲线被transition-timing-function所定义，之后作用到每个CSS属性的过渡。可以规定多个timing function，根据transition property的列表给每个CSS属性应用相应的timing function。如果timing function的个数比transition property中数量少，缺少的值被设置为初始值（ease）。如果timing function比transition property要多，timing function函数列表会被截断至合适的大小。

transition-timing-function的取值：

transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)

transition-delay规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位。值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟将会分别作用于所指定的相符合的transition-property。

检测过渡是否完成

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

propertyName：字符串，表示已完成过渡的属性。

elapsedTime：浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受transition-delay影响。

可以使用element.addEventListener()方法来监听这个事件：

el.addEventListener("transitionend", updateTransition, true);

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

以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;
}

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

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

将按照下面这样处理：

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

以下例子设置了菜单的外观，在鼠标悬浮时，菜单里的元素的文字、颜色及背景色都发生了变化：

<div class="sidebar"><p><a class="menuButton" href="home">Home</a></p><p><a class="menuButton" href="about">About</a></p><p><a class="menuButton" href="contact">Contact Us</a></p><p><a class="menuButton" href="links">Links</a></p>
</div>

.menuButton {position: relative;transition-property: background-color, color;transition-duration: 1s;transition-timing-function: ease-out;text-align: left;background-color: grey;left: 5px;top: 5px;height: 26px;color: white;border-color: black;font-family: sans-serif;font-size: 20px;text-decoration: none;box-shadow: 2px 2px 1px black;padding: 2px 4px;border: solid 1px black;
}.menuButton:hover {position: relative;transition-property: background-color, color;transition-duration: 1s;transition-timing-function: ease-out;background-color:white;color:black;box-shadow: 2px 2px 1px black;
}

原文：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

转载于:https://www.cnblogs.com/xjy20170907/p/11599713.html

css3动画 --- Transition相关推荐

css3 动画 transition transform 百度钱包练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
CSS3动画、定位小结
一.定位小结 1.相对单位相对定位的特性相对于自己的初始位置来定位元素位置发生偏移后,它原来的位置会被保留下来层级提高,可以把标准文档流中的元素及浮动元素盖在下边 ...
使用transform和transition制作CSS3动画
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...
用css3的transition实现过渡动画
CSS3,用transition实现过渡动画用到了transition就先说说这个属性吧! 一.transition属性简介 transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画 ...
css3 transform transition 动画效果
直接记住这几个transition的配置,就可以做出来漂亮的动画效果了 1.变形--旋转 rotate('旋转值'deg) ,rotate()函数只是旋转,而不会改变元素的形状(旋转值为正顺时针旋转 ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

css3动画 --- Transition

css3动画 --- Transition相关推荐

最新文章

热门文章