过渡
() 是 CSS3 的颠覆性功能之一,我们可以在元素从一种样式过渡到另一种样式时为元素添加效果,而无需使用 Flash 动画或 .
过渡动画:从一种状态逐渐过渡到另一种状态。老版本浏览器不支持,但不影响页面布局。通常与 :hover 一起使用。
属性
说明
取值范围
–
要应用过渡效果的 CSS 属性的名称
CSS 属性可以是 (all, width, color …)
–
过渡效果持续时间
秒和毫秒都可以,1s …
—
转场效果展示方式
(匀速),ease(慢启动,快中,慢结束,默认可省略)
-延迟
过渡效果延迟时间
秒和毫秒都可以,1s …
div{
width: 200px;
height: 100px;
background-color: pink;
transition: width 1s ease 0s,height 2s ease 1s;
// transition:要过渡的属性 花费的时间 运动曲线 何时开始;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover{
width:400px;
}
//完整代码块
过渡
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
}
/* 鼠标悬停时改变盒子颜色 */
div:hover {
background-color: aqua;
transition: all .8s linear 0s;
}
动画
() 是将元素从一种样式逐渐更改为另一种样式的效果。
您可以随意更改任意数量的样式。
请以百分比形式指定更改发生的时间,或使用关键字“from”和“to”,相当于0%和100%。
0% 是动画的开始,100% 是动画的结束。
为了获得最佳浏览器支持,您应该始终定义 0% 和 100% 选择器。
值说明
-名称
指定需要绑定到选择器的名称。 .
–
指定完成动画所需的时间,以秒或毫秒为单位。
—
指定动画的速度曲线。
-延迟
指定动画开始前的延迟。
–计数
指定动画应该播放多少次。
–
指定动画是否应轮流反向播放。
-播放状态
指定动画是正在运行还是暂停。默认为“”。
-填充模式
指定动画时间之外的对象状态。
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
// 完整代码块
animation
div {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: skyblue;
position: absolute;
border-radius: 50%;
}
div {
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来,
若侵犯了您的合法权益,请来信通知我们1413333033@qq.com,
我们会及时删除,给您带来的不便,我们深表歉意。
下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,访问及下载者下载默认同意本站声明的免责申明,请合理使用切勿商用。
THE END
暂无评论内容