首页 > 代码库 > css3 动画
css3 动画
<!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
background-color: red;
margin: 100px auto;
/*过渡动画对元素本身没有任何的改变只是一个过渡*/
/*transition-property是用来设置受动画影响的属性 也就是给什么属性左动画*/
/*transition-property: all;*/
/*transition-duration: 2s;*/
/*注意延时等待对过渡动画完成后返回原状时也生效*/
/*transition-delay: 2s;*/
/*动画曲线
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果*/
/*transition-timing-function: linear;*/
/*同样transition和background类型属性集合的写法
注意:持续和等待时间 写的时候是有顺序的 前一个是持续时间 后一个是等待时间*/
transition: all linear 1s 0s;
}
/* hover 徘徊
鼠标放上后的效果*/
div:hover{
width: 500px;
height: 500px;
/*opacity: 0;*/
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3 动画