购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 过渡

CSS3 过渡
通过CSS3的过渡动画,我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果
编辑:前端控 前端控 更新时间:2019-02-01 10:43:40

CSS3 过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果

浏览器支持:

属性
                                                              浏览器支持
transition

        

              

                

     需要前缀 -webkit-

       

CSS3过渡的用法:

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性

  • 指定效果的持续时间

实例

div
{
	width:100px;
	height:100px;
	background:#48ef96;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}

div:hover
{
	width:450px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

多样式改变

要添加多个样式的变换效果,需要添加的属性要由逗号分隔

实例

div
{
	width:100px;
	height:100px;
	background:#48ef96;
	transition:width 2s, height 2s, -webkit-transform 2s;
	-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover{
	width:150px;
	height: 150px;
	-webkit-transform:skew(40deg,50deg);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif


过渡属性

属性描述CSS版本
transition 简写属性,用于在一个属性中设置四个过渡属性3
transition-property规定应用过渡的 CSS 属性的名称3
transition-duration定义过渡效果花费的时间,默认是 03
transition-timing-function 规定过渡效果的时间曲线,默认是 "ease"3
transition-delay  规定过渡效果何时开始,默认是 03

实例

div
{
	width:100px;
	height: 100px;
	background-color: #48ef96;
	transition-property: background,-webkit-transform;
    transition-duration: 4s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
div:hover{
	background:pink;
	-webkit-transform:skew(40deg,50deg);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号