css3动画效果transition的用法

下面是一个css3中transition动画的简单例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transition效果</title>
		<style>
			div{
				width:100px;
				height:100px;
				background:#26FFFF;
				content:"";
				transition: width 3s 1s;
			}
			div:hover{
				width:500px;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

上述的例子的功能介绍:鼠标移入色块div,div的宽度则在3s内width变为500px;

上述代码中

transition: width 3s 1s;

transition的属性值简单说明,第一个为监控的属性,这里监控的width,也可以使用all(监控所有的属性,逐一监控的话效率比all高需要监控两个写两个就行) 第二个为动画执行时间,第三个延迟操作时间(操作延时1s进行操作).

一般使用的时候直接写入监控属性和动画执行时间就ok!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

jQuery Tools Scrollable使用的限制

在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似j...

2045
来自专栏Youngxj

emlog添加新浪图片外链小工具

2015
来自专栏web前端教室

《vue+vant+node+mongoDB+koa2》电商项目实战连载(5)

喔~~~,原来是这样,其实还是一些封装好的自定义组件。把上面的代码直接复制到vue的template中,

942
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第5天

1072
来自专栏GreenLeaves

JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。 1、async:可选...

20610
来自专栏无原型不设计

【Mockplus教程】添加

1. 拖动添加 用鼠标从左侧组件面板中拖动一个组件到工作区,即可完成组件的添加。 2. 搜索添加 在上方组件搜索框中输入想要添加的组件名字,在自动弹出来...

3348
来自专栏微信小程序开发

小程序不同页面之间的传值方式

今天来说一下小程序不同页面之间传值的几种方式: 1、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/d...

68710
来自专栏Pythonista

Go开发之VScode安装

https://vscode.cdn.azure.cn/stable/bc24f98b5f70467bc689abf41cc5550ca637088e/VSCo...

1251
来自专栏编程微刊

前端程序员表白神器

3422
来自专栏Python小屋

Python批量导入图片生成PowerPoint 2007+文件

使用方法:安装扩展库python-pptx,然后把上文中抓取的图片和本程序放在同一个文件夹。 import os import pptx from pptx.u...

3013

扫码关注云+社区

领取腾讯云代金券