css3动画
css3动画
css3里面的animation属性非常强大，但是自己用的比较少，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习
css3动画用来做什么
主要用来做一些页面的美化,和一些前端简单的动画比如:旋转,变形,若影若现,逐帧动画和x轴y轴的一些直线动画
animation属性一览
因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了
css3的简单实现
使用animation实现动画
需求是：当我打开页面的时候，会有一个300*300的粉色的正方形从左边移动到右边。
首先我们来看看CSS3是怎样使用动画的，可以大致分为两步：
定义动画
调用动画
- 如何定义动画
定义动画需要用到 @keyframes 关键字，他的格式是下面这样的：
@keyframes 动画名称 {
0% {
// 初始状态
}
100% {
// 结束状态
}
}
其中0%和100%可以用from和to代替，也就是：
@keyframes 动画名称 {
from {
// 初始状态
}
to {
// 结束状态
}
}
- 如何调用动画
调用动画要用到 animation-name 以及 animation-duration 属性，前者是要调用的动画的名字，后者是该动画要持续的时长。比如：
/* 第二步：使用动画 */
animation-name: move;
animation-duration: 1.3s;//完成动画的时间
这样就OK了。
最后附上实现开始需求的完成代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画的简单使用</title>
<style>
div {
height: 300px;
width: 300px;
background-color: pink;
/* 第二步：使用动画 */
animation-name: move;
animation-duration: 1.3s;//完成动画的时间
}
/* 第一步：定义动画 */
@keyframes move {
/* 初始状态 */
0% {
transform: translateX(0);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
