因为在项目中经常使用到transition,而且在学习vue过程也有transition过渡,因此在这里着重了解一下:
W3C的官方文档中是这样阐述transition的:CSS的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值
一、语法
transition: property duration timing-function delay
transition属性是个复合属性,它包括以下几个子属性:
- transition-property :规定设置过渡效果的css属性名称
- transition-duration :规定完成过渡效果需要多少秒或毫秒
- transition-timing-function :指定过渡函数,规定速度效果的速度曲线
- transition-delay :指定开始出现的延迟时间
默认值分别为:all 0 ease 0
注:transition-duration 时长为0,不会产生过渡效果
一、transition-property:
transition-property: none |all |property;
值为none时,没有属性会获得过渡效果,值为all时,所有属性都将获得过渡效果,值为指定的css属性应用过渡效果,多个属性 用逗号隔开。
二,transition-duration
transition-duration:time;
该属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间
三,transition-timing-function
transition-timing-function:linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n)
取值:
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线 上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐 标可以改变整个过程的Output Percentage。初始默认值为default.
注意:值cubic-bezier(n,n,n,n)可以中定义自己的值,如 cubic-bezier(0.42,0,0.58,1)
四,transition-delay
这个属性没什么说的了,就是过渡效果开始前的延迟时间,单位秒或者毫秒
下面展示一个利用transition和transform结合实现一个3d导航栏的例子
<body>
<ul class = "nav">
<li>
<span>电子工程学院</span>
<span>西安电子科技大学</span>
</li>
<li>
<span>通信工程学院</span>
<span>西安电子科技大学</span>
</li>
<li>
<span>微电子学院</span>
<span>西安电子科技大学</span>
</li>
<li>
<span>人文学院</span>
<span>西安电子科技大学</span>
</li>
<li>
<span>经济管理学院</span>
<span>西安电子科技大学</span>
</li>
<li>
<span>计算机学院</span>
<span>西安电子科技大学</span>
</li>
</ul>
</body>
body{
margin:0;
padding:0;
font-family:'微软雅黑';
background:#F7F7F7;
}
.nav{
height:40px;
margin-top:50px;
text-align:center;
list-style:none;
}
li{
width:140px;
height:40px;
float:left;
text-align:center;
line-height:40px;
position:relative;
margin-right:10px;
transition:all 1s;
transform-style:preserve-3d /*只有子盒子全部使用了transform是才能有用 */
}
li span{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
}
li span:last-child{
background:yellow;
transform:translateZ(20px)
}
li span:first-child{
background:blueviolet;
transform:rotateX(90deg) translateZ(20px)
}
li:hover{
transform:rotateX(-90deg)
}
效果如图:
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
例:animation: myanimation 2s linear 1s infinite forwards;
animation 属性是一个简写属性,用于设置动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- animation-name 动画名称
- animation-duration 动画指定需要多少秒或毫秒完成
值:time 默认值为 0,意味着没有动画效果
- animation-timing-function 设置动画如何完成一个周期
值:linear 匀速
ease 先慢后快,结束前变慢 默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
- animation-delay 动画在启动前的延迟间隔
值:time 默认值为 0
- animation-iteration-count 动画的播放次数
值:n 一个数字,定义播放多少次动画 默认值1
infinite 动画无限次播放
- animation-direction 是否轮流反向播放动画
值:normal 正常
reverse 反向播放
alternate 在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放
alternate-reverse 在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放
- animation-fill-mode 当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要处于什么状态
值:none 默认,播放完动画后,画面停在起始位置
forwards 播放完动画,停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay,在开始到delay这段时间,画面停在第一帧。如果没有设置delay,画面是元素设置的初始值
both 设置动画状态为动画结束或开始的状态(例如设置奇数播放为forwards状态,偶数播放为backwards状态)
- animation-play-state 动画是否正在运行或已暂停
值:paused 指定暂停动画
running 指定正在运行的动画,默认
- initial 设置属性为其默认值
- inherit 从父元素继承属性