步骤:
1. 定义
2. 调用
1. 定义动画
语法:
@keyframes 自定义动画名 {
步长1{
样式
}
步长2{
样式
}
步长n{
样式
}
}
语法解释:
语法不是很复杂, 就是通过@keyframes关键字给将要定义的动画起一个名字,然后指定步长和每步要做的事情。
比如想定义一个名字为 action 的动画, 然后预想动画分三个步骤执行, 每步中想让元素旋转180°,就可以写成如下代码:
@keyframes action{
0%{
transform: rotate(0);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
2. 调用动画
语法:
序号 | 属性 | 取值 | 描述 |
1 | animation-name | @keyframes指定的名字 | 调用动画的名字 |
2 | animation-duration | 数值 + 单位(s/ms) | 动画在多久完成一次 |
3 | animation-timing-function | linear、ease等 | 动画过渡时的样式 |
4 | animation-delay | 数值 + 单位(s/ms) | 动画延迟多久执行 |
5 | animation-iteration-count | 数值 或 infinite(无限循环) | 动画执行次数 |
6 | animation-direction | alternate(正序倒序交替)、reverse(倒序) | 动画播放顺序 |
7 | animation-play-state | stop(暂停) | 动画暂停与开始 |
8 | animation | animation: #1 #2 #3 #4 #5 #6 | 简写, 注意要按照序号顺序 |
语法解释:
(1) 红色部分的属性是必须的, 不能省略, 也是执行一个动画最基本的两个属性。
(2) 谁要调用动画, 就把 animation 属性写在它的CSS中。
比如 id 为 call 的元素想要调用名字为 action 的动画并要求动画每次要在5秒内执行完成, 可以写如下代码:
#call{
animation: clock 5s;
}
简单演示
需求:
(1) 定义一个名字为 action 的动画
(2) 动画内容是将元素旋转一圈, 动画总共分成五步执行, 每步旋转90°
(3) 动画无限循环执行, 并且让动画正序倒序交替执行
(4) div 调用该动画
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS动画</title>
<style>
div {
position: relative;
margin-top: 300px;
margin-left: 300px;
width: 5px;
height: 100px;
background-color: #000;
transform-origin: 50% 0;
animation: clock 2s linear 0s infinite alternate;
}
@keyframes clock {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>