- 属性1:transiton:允许css的属性值在一定时间区间内平滑地过渡。
1. transition-property:执行变换的属性
2. transition-duration:执行变换的时间
3. transition-time-function:执行变换的速率
4. transition-delay:执行变换的延迟时间。
- 属性2:animation:将动画与名称绑定
1. animation-name:规定需要绑定到选择器@keyframes的名称。其主要有两个值,IDENT/none。IDENT是由Keyframes创建的动画名,即此处的INDENT要和Keyframes中的IDNET一致。
2. animation-duration:规定动画完成的时间。
3. animation-time-function:规定动画曲线。
4. animation-delay:规定动画开始之前的延迟。
5. animation-iteration-count:规定动画应该播放的次数。
6. animation-direction:规定是否应该轮流反向播放动画。
其中:animation-time-function:
1) linear:动画从头到结尾速度是相同的
2) ease:默认,动画以低速开始,然后加快,在结束前变慢。
3) ease-in:动画以低速开始
4) ease-out:动画以低速结束
5) ease-in-out:动画以低速开始和结束。
6) cubic-bezier:又称三次贝塞尔,主要为animation生成速度曲线的函数,规定是cubic-bezier(<x1>,<x2>,<x3>,<x4>)。
从上图我们需要知道的是cubic-bezier的取值范围:
- P0:默认值(0,0)
- P1:动态取值(x1,y1)
- P2:动态取值(x2,y2)
- P3:默认值(1,1,)
其中x轴的取值范围是0到1,y轴取值没有规定。
以一条直线放在范围只有1的坐标轴中,并从中间拿出两个点来拉扯(X轴的取值区间是[0,1],y轴任意),最后形成的曲线就是动画的速度曲线。当我们不为transition添加cubic-bezier或是其他timing-function时,默认曲线是ease。此时的速度曲线是:
几个常用的固定值对应的cubic-bezier值以及速度曲线。
1. ease:cubic-bezier(.25,.1,.25,1)
2. liner:cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
3. ease-in:cubic-bezier(.42,0,1,1)
4. ease-out:cubic-bezier(0,0,.58,1)
5. ease-in-out:cubic-bezier(.42,0,.58,1)
6. in out .back(来回的缓冲效果):cubic-bezier(0.68,-0.55,0.27,1.55)
- 属性3:transform:向元素应2D或3D转换。该属性允许我们队元素进行旋转、缩放、移动或倾斜。transform 函数包括了translate(平移转换)、scale(缩放转换)、rotate(转换)和skew(倾斜转换)。
- 属性4:transform-origin:指定元素的中心点在哪里,必须配合transform使用。默认情况下,变形的原点在元素的中心点,也就是元素X轴和Y轴的50%处。
animation 类似于transition属性,他们都是随着时间改变元素的属性值。主要区别是transition需要触发一个事件(hover事件或者click事件)才会随时间改变其css属性,而animation 在不需要触发任何事件的情况下也可以随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation 的动画属性,基于这一点,css3的animation 就需要明确的动画属性值,即我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变换的效果。
- @keyframes:关键帧 keyframes-selector:规定时间百分比
@keyframes animationname{keyframes-selector{css-styles;}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background-color: #1a1c24;
}
#heart,#echo{
position: fixed;
width: 300px;
height: 300px;
top: 100px;
left: 250px;
transform: scale(0.95);
}
#heart:before,#heart:after,#echo:before,#echo:after{
content: "";
position:absolute;
top: 40px;
width: 150px;
height: 240px;
background-color: red;
border-radius: 150px 150px 0 0 ;
transform: rotate(-45deg);
transform-origin:0 100%;
}
#heart:before,#echo:before{
left:150px;
}
#heart:after,#echo:after{
left:0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#heart:after{
box-shadow: inset -6px -6px 0px 6px rgba(255,255,255,0.1)
}
#heart:before{
box-shadow: inset 6px 6px 0px 6px rgba(255,255,255,0.1)
}
#heart i:after{
content: "";
position: absolute;
top: 35%;
left: 15%;
z-index: 10;
font-size: 30px;
font-weight: 100;
color: rgba(255,255,255,0.8);
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
#heart,#echo{
animation-name:heartbeat;
animation-duration:2000ms;
animation-timing-function:cubic-bezier(0,0,0,1.74);
animation-delay:500ms;
animation-iteration-count:infinite;
animation-play-state:running;
}
#echo{
animation-name:echo;
}
@keyframes heartbeat{
0%{transform: scale(0.95);}
100%{transform: scale(0.95);}
50%{transform: scale(1);}
}
@keyframes echo{
0%{opacity: 0.1;transform: scale(1);}
100%{opacity: 0;transform: scale(1.4);}
}
</style>
</head>
<body>
<div id="heart">
<i></i>
</div>
<div id="echo"></div>
</body>
</html>