transition动画(过渡动画)和keyframes动画
1.transition动画
首先介绍一些transition的一些属性:
transition-duration:完成动画所需要的时间——默认为0,动画效果无效,所以一定要设置一个时间
transition-delay:动画延迟多久开始
transition-property:动画效果的css属性的名称 如width height等
transition-timing-function:动画的速度曲线
代码实现:
<!DOCTYPE html>
<html>
<head>
<title>keyFrom</title>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background-color: red;
transition-duration: 1s;
transition-delay: 0;
transition-property: all;
transition-timing-function: ease;
}
.container:hover{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
实现一个简单的动画,div初始时宽度和高度200px,当鼠标悬停时,进行宽度和高度拉长的动画
其中:
动画完成时间:1s
动画延迟:0s
动画css属性:all 即宽和高
时间曲线:ease 慢速开始和结束 中间快
该属性常用效果有:linear ease ease-in ease-out等
2.keyframes动画
重点:animation属性 类似与transition属性
其中@keyframes 中可设置from和to 也可以设置0% 50% 100%等
实现transition动画效果代码:
<!DOCTYPE html>
<html>
<head>
<title>keyFrom</title>
<style type="text/css">
.container{
width: 200px;
height:200px;
background-color: red;
/*animation: run 5s;*/
animation-name: go;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes go{
0%{
height: 100px;
}
50%{
height: 600px;
}
100%{
height: 500px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
animation-iteration-count: infinite; 无限循环