css3的过度可以改变位置吗

html-css021

css3的过度可以改变位置吗,第1张

可以

Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下:

transition: property duration timing-function delay/*

property:执行过渡的属性

duration:执行过渡的持续时间

timing-function:执行过渡的速率模式

delay:延时多久执行

*/

transition-property

可取值:

none

没有属性会获得过渡效果。

all

所有属性都将获得过渡效果。

property

定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

div{transition-property:width-moz-transition-property: width/* Firefox 4 */-webkit-transition-property:width/* Safari 和 Chrome */-o-transition-property:width

/* Opera */}

transition-duration

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,回想一下如果只有transform属性,是不是变换啪地一下完成了。

div{transition-duration: 5s-moz-transition-duration: 5s/* Firefox 4 */-webkit-transition-duration: 5s/* Safari 和 Chrome */-o-transition-duration: 5s/* Opera */}

transition-timing-function

既然是动画,那么就有动画的运行速率,不同的速度会产生不同的结果,以下是可取值。

ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

速率示意图

transition-delay

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,也就是立即执行,如果在多个动画直接有先后顺序,那么它就会派上用场。

把它们写在一起

浏览器内核的前缀不能忘啊,使用emmet神器来帮助你。

emmet使用如图所示:

-webkit-transition: all 0.5s ease-in-out 0s

-o-transition: all 0.5s ease-in-out 0s

transition: all 0.5s ease-in-out 0s

如图所示

将它们放在一起的效果如下,可以很明显的发现它们之间的不同。

实现垂直居中,基本上都是给父元素加相对定位,给自己加绝对定位,然后top:50%和 left:50%,然后元素再向上移动自身一半的高度,向左移动自身一半的宽度,这样一来就可以实现元素的水平居中和垂直居中。

在还没有css3的时候,要给出确定的left和top值,需要经过较多的计算,而在css3中,就不需要这么麻烦了,top和left直接设置成50%,然后利用css3的transform属性。这个属性有一个translate值,表示移动元素,只需给元素加上transform:translate(-50%,-50%)这句css即可。

需要注意的是,在给元素绝对定位的时候写的50%,表示父元素的宽高,而这里transform中的50%,表示元素自身的宽高,加上负号表示反向。

当我们给元素添加Animation后,动画总是现在元素的初始位置显示一下,然后再跳到动画的起始位置播放,这样的话会很难看。

解决方法:

使用animation-fill-mode:forwards属性

forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置

backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置

上边样式的将变现为,class为phone的元素会在加载完成后,从它的定义位置靠下5rem开始动画。

js中赋值nimation-fill-mode:forwards的方法:

object .style.animationFillMode=none | forwards | backwards | both