动画
- @keyframes name animation
@keyframes rect { // 定义动画的状态
0%, // 动画的起始状态
100% { // 动画的结束状态
-webkit-transform: translateY(0.16rem);
transform: translateY(0.16rem); // 改变：垂直方向转变
}
50% {
-webkit-transform: translateY(-0.16rem);
transform: translateY(-0.16rem);
}
}
animation: rect 4s ease-in-out infinite; // 定义动画的形式
- animation: name duration timing-function delay iteration-count direction;
- name为动画的名称
- duration为动画持续的时间。这个为必填项，否则默认为0。
- timing-function 规定动画的速度曲线
- linear：动画从头到尾的速度是相同的
- ease：默认。动画由慢变快，再由快变慢
- ease-in：由慢变快
- ease-out：由快变慢
- ease-in-out：由慢变快，再由快变慢(过渡的效果比ease缓和一些)
- cubic-bezier：自己定义值，用的较少
- delay 规定动画开始之前的延迟时间。默认不填为立即播放。
- iteration-count：规定动画播放的次数。infinite为无限次循环播放。默认不填为1次。
- direction：normal | alternate。 如果动画只播放一次，该属性没有作用。alternate代表反向播放。
- ease-in-out为动画的效果
渐变
- transition 通过transition可以设置当某个属性发生变化时变化的速度及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 300px;
background-color: red;
opacity: .5;
/* ,为多个属性各自的样式，第一个时间代表过渡花费的总时间，第二个时间为过渡开始的时间，linear代表动画的线性效果 */
transition: width 10s, opacity 5s linear 5s;
}
div:hover {
opacity: 1;
width: 400px;
height: 600px;
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
改变、变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 300px;
background-color: red;
transition: transform 5s ease;
}
div:hover {
/* rotate3d代表3d旋转 */
transform: rotate3d(100, 100, 100, 70deg);
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
网友评论