CSS3——动画
?
动画
- 什么是帧
一段动画，就是一段时间内连续播放n个画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个顿，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。
2.什么是关键帧
关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧
from和百分比可以混着用，但是一般不建议
?动画的简单定义方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
</script>
<style>
/*定义一个动画（定义一组关键帧）*/
/*开始帧,一般情况下不用设置第一帧*/
/*动画的名字只能是唯一的*/
@keyframes wangyoudong{
from{
}
/*最后一帧*/
to{
transform:translate(900px);
background-color: red;
}
}
.inner{
width:100px;
height:100px;
background-color:deepskyblue;
/*应用动画到元素*/
animation-name:wangyoudong;
/*动画持续时间,必须要写*/
animation-duration: 3s;
/*动画延迟时间*/
animation-delay: 0.5s;
/*显示完整的动画过程的两种形式：
一、把浏览器调整为独立显卡工作模式
在浏览器的系统设置中开启“使用硬件加速模式”
二、设置延迟也可以显示完整的动画过程*/
}
</style>
</head>
<body>
<div class="inner"></div>
</body>
</html>?动画的完整定义方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript">
</script>
<style>
/*定义一个动画（定义一组关键帧）*/
/*开始帧,一般情况下不用设置第一帧*/
/*动画的名字只能是唯一的*/
@keyframes wangyoudong2{
0%{
}
20%{
background-color:greenyellow;
}
40%{
background-color:yellow;
}
60%{
background-color: green;
}
80%{
background-color: pink;
}
100%{
transform:translate(900px);
background-color:orange;
}
}
.inner{
width:100px;
height:100px;
background-color:deepskyblue;
/*应用动画到元素*/
animation-name:wangyoudong2;
/*动画持续时间,必须要写*/
animation-duration: 3s;
/*动画延迟时间*/
animation-delay: 0.5s;
/*显示完整的动画过程的两种形式：
一、把浏览器调整为独立显卡工作模式
在浏览器的系统设置中开启“使用硬件加速模式”
二、设置延迟也可以显示完整的动画过程*/
}
</style>
</head>
<body>
<div class="inner"></div>
</body>
</html>给元素应用动画，用到的属性如下:
1.animation-name: 给元素指定具体的动画 (具体的关键顿)
2. animation-duration : 设置动画所需时间
3 animation-delay : 设置动画延迟
.box (
/* 指定动画 */
animation-name: testKey;
/* 设置动画所需时间 ,这个是必须要写的*/
animation-duration: 5s;
/* 设置动画延退 */
animation-delay: 0.5s;
/*其他属性----start*/
/*设置动画的方式*/
animation-timing-function：linear;
/*动画播放的次数,infinite是无限循环播放*/
animation-iteration-count:infinite; ??
/*动画的方向*/
animation-direction:alternate;
/*动画以外的状态（不发生动画的时候在哪里）*/
/*animation-fill-mode:forwards;*/
.outer:hover .inner{
/*动画的播放状态*/
animation-play-state:paused;
}
可以设置很多的效果和变换
to{
transform: translate(900px) rotate(360deg);
background-color:purple;
border-radius: 50%;
}
ease:平滑过渡--默认值
linear : 线性过渡
ease-in:慢一快
ease-out : 快一慢
ease-in-out : 慢一快一慢
step-start : 等同于 steps(1，start)
step-end :等同于 steps(1， end)
steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end，指定每一步的值发生变化的时间点。第二个参数默认值为 end，
cubic-bezie(number,number,number,number): 特定的贝赛尔曲线类型
animation-iteration-count ，指定动画的播放次数，常用值如下
1 number:动画循环次数
- infinite :无限循环
animation-direction ，指定动画方向，常用值如下:
1. normal:正常方向(默认)
2 reverse: 反方向运行
- alternate : 动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse: 动画先反运行再正方向运行，并持续交替运行
animation-fill-mode，设置动画之外的状态
1 forwards : 设置对象状态为动画结束时的状态
2backwards : 设置对象状态为动画开始时的状态
animation-play-state ，设置动画的播放状态，常用值如下
1 running: 运动(默认)
2 paused:暂停
动画复合属性
只设置一个时间表示 duration，设置两个时间分别是:duration 和 delay ，其他属性没有数量和顺序要求
.inner (
animation :atguigu 3s 0.5s linear 2 alternate-reverse forwards;
备注: animation-play-state 一般单独使用
过渡和动画的区别
/*用过渡实现inner1跑到右边去*/
.inner1{
background-color:orange;
/*谁发生过渡，给谁加*/
transition:3s linear;
}
/*动画不需要触发条件，过渡需要*/
.outer:hover .inner1{
transform:translate(900px);
}
/*动画可以设置精细的过渡效果，过渡不可以*/
/*用动画实现inner2跑到右边去*/
@keyframes donghua{
0%{}
100%{
transform:translate(900px);
}
}
.inner2{
background-color:green;
animation:donghua 3s linear;
}
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！