CSS3animation属性详解（一）
程序员文章站
2022-03-16 16:43:41
...
CSS3animation属性详解（一）
1. animation-timing-function
animation-timing-function属性
检索或设置对象动画的过渡属性
语法
animation-timing-function:
ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps(<integer>[,[start | end]]?) |
cubic-bezier(<number>,<number>,<number>,<number>);
参数说明
linear：线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease：平滑过渡。等同于贝塞尔曲线（0.25，0.1，1.25，1.0）
ease-in：由慢到快。等同于贝塞尔曲线（0.42，0.0，1.0，1.0）
ease-out：由快到慢。等同于贝塞尔曲线（0.0，0.0，0.58，1.0）
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线（0.42，0.0，0.58，1.0）
2. animation-delay
animation-delay属性
检索或设置对象动画的延迟时间
语法
animation-delay: time;
参数说明
可选。定义动画开始前等待时间，以秒或毫秒计。默认值为0
编程练习
如今有一些页面元素会在网页加载完成之后以一个绚丽的飞入效果博得浏览者的眼球，比如一个温馨提示框在网页加载之后2s左右从上方飞下来。那么我们也来尝试一下吧。
任务
- 创建一个div，用CSS控制其大小、边框、字体、位置等
- 设置div的动画名称、动画持续时间和动画延迟
- 创建动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3animation属性详解（一）</title>
<style type="text/css">
div{
font-family: "微软雅黑";
font-size: 60px;
font-weight: bold;
line-height: 600px;
position: absolute;
top: -1000px;
right: 0;
left: 0;
width: 800px;
height: 600px;
margin: auto;
text-align: center;
border: 5px solid #000000;
border-radius: 50%;
animation-name: disp;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes disp{
from{top: -600px;}
to{top: 75px;}
}
</style>
</head>
<body>
<div>大家好！</div>
</body>
</html>
上一篇： iOS-UIGestureRecognizer详解-原理篇
下一篇： Homebrew 一些使用方法