本文详细介绍了CSS3中的动画和过渡效果，包括2D变换如位移、缩放、倾斜和旋转，以及如何通过`transition`属性实现平滑过渡。此外，还探讨了`animation`属性和关键帧动画的使用，以及`steps()`函数在创建分步动画中的应用。通过实例代码展示了如何创建各种动画效果，并提供了检测动画完成的方法。
所谓的动画本身原理就是一帧帧的图片快速切换,进行欺骗肉眼而已,那么多少频率,以及多少张图片加起来才能欺骗肉眼呢?
答案: 一秒进行切换22+张图片就能实现肉眼的欺骗,但是想要动作不假更加的流畅那么就需要增加图片的数量以及图片的细节…
2D动画
- 2D位移
- 2D放大缩小
- 2D倾斜
- 2D旋转
- 动画过渡
使用2D动画必须是块元素或者行块元素或者img
display: block; display: inline-block;
2D动画不加过渡 看不到过程 就是静态 没动画效果直接出结果 可以用于改变 图像和文字位置
我们来一个一个的演示
2D演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" href="images/favicon.ico" type=”image/x-icon”/>
<style>
* {
padding: 0px;
margin: 0px;
}
.div_po{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.div_f{
width: 1000px;
height: 500px;
border: 2px #626285 solid;
text-align: center;
display:table-cell;
vertical-align:middle;
}
img:hover{
/* 添加2D动画*/
}
</style>
</head>
<body>
<div class="div_po">
<div class="div_f">
<img src="ad.png" width="100px" height="200"/>
</div>
</div>
</body>
</html>
2D位移
第一个值: 左右偏移 正右 负左
第二个值: 上下偏移 正下 负上
transform:translate(10px ,15px);
2D放大缩小
2就是放大2倍 1.5就是1.5倍… 1就是他本身大小
缩小就是要低于1 0就是图片消失
transform:scale();
他有两个值 第一个值是变宽 第二个值是变高 (逗号隔开) 如果只设置一个值 那么宽高同时变动
放大
transform:scale(2);
缩小
transform:scale(0.7);
2D倾斜
transform:skew(?deg); 正向左 负向右
还可以设置两个值(20deg,10deg) 将图片 倾斜变形
设置一个值的效果
transform:skew(-20deg);
设置二个值的效果
transform:skew(20deg,40deg);
2D旋转
语法transform: rotate(?deg);
正右转 负左转 -90 就是向左90度旋转
动画过度 时候可以配合2D大小transform: rotate(?deg) scale(?); 边旋转边扩大
transform: rotate(-90deg);
动画过渡
动画过度就是让 静态图片有动画效果 而不是 从开始直接结束了 没有过程
下面我们来看看它如何使用：
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。
一、transition-property
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
二、transition-duration
transition-duration是用来规定完成过渡效果需要多少秒或毫秒，单位为s（秒）或者ms(毫秒)。
三、transition-timing-function
规定速度效果的速度曲线。
transition-timing-function有6个值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-timing-function: cubic-bezier(1,0.2,0.2,1); 一共4个属性 最大1 最小0 控制动画的快慢
transition-timing-function:还有一个属性 steps() 在文章最后有详细介绍
transition-timing-function : 速度曲线||自定义速度曲线|| steps() 这三种 只能设置一个
四、transition-delay
transition-delay用来规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。也就是说当改变元素属性值后多长时间开始执行transition效果。
结合以上关键属性
transition:all 0.8s ease-in-out ;
使用了 : property duration function
演示:
img:hover{
transform: rotate(-360deg) scale(1.5);
transition:all 0.8s ease-in-out ;
}
以上所有2D都能进行过度 和组合使用 合理搭配
动画
animation 属性是一个简写属性，用于设置六个动画属性：
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count
-
animation-direction
1、animation-name：指定@keyframes的名字，CSS加载时会应用该名字的@keyframes规则来实现动画。
2、animation-duration：动画持续时间，默认是0表示无动画，单位可以设s秒或ms毫秒。
3、animation-timing-function：动画播放方式，
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-timing-function: cubic-bezier(1,0.2,0.2,1); 一共4个属性 最大1 最小0 控制动画的快慢
transition-timing-function:还有一个属性 steps() 在文章最后有详细介绍
transition-timing-function : 速度曲线||自定义速度曲线|| steps() 这三种 只能设置一个
4、animation-delay：延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。
5、animation-iteration-count：动画循环播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。
6、animation-direction：动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画(123…)。alternate表示动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。
7、animation-fill-mode: 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，none(默认 开始位置)|| forwards || backwards || both
forwards动画停留结束位置 backwards动画停留开始位置
both 设置了结束位置也就是100% 那么就停留在100%的状态 如果没有设置100%或者100%里没有内容那么 就回归到开始位置状态
7、animation-play-state：动画的状态，可设running，paused。默认值running表示正在播放动画，paused表示暂停动画
暂停动画播放 可以配合 js鼠标事件和css鼠标状态来激活动画
?:hover{
/开启动画/
animation-play-state:running;
}
或者js click 等事件
常用的几种组合配置
随意组合
animation: key 3s linear 2 alternate both;
执行动画时间3s 均速 执行两次 奇数为正偶数为负 停留结束位置 如果没有结束位置就返回开始位置
最少设置
animation: key 3s ;
执行动画时间3s 逐渐变慢(默认值) 停留开始位置
最全设置
animation: key 3s ease-in-out 2s 3 alternate-reverse forwards paused ;
执行动画时间3s , 加速然后减速 , 延时2s在执行 , 执行3次 , 奇数反 偶数正 ,停留结束位置 , 暂停动画播放
配合鼠标悬浮状态来激活动画
?:hover{
/*开启动画*/
animation-play-state:running;
}
关键帧
@keyframes：规定动画。Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%“而"to"相当于"100%”, 在0%处必须指定初始状态 100%处结束状态 过程任意
跳球案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" href="images/favicon.ico" type=”image/x-icon”/>
<style>
* {
padding: 0px;
margin: 0px;
}
.div_po{
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px silver solid;
position: absolute;
left: 0px;
top: 400px;
background-color: #f42f31;
animation: key 3s linear 2 alternate both;
}
@keyframes key {
0%{
left: 50px;
top: 200px;
background-color: #f4ab2d;
}
10%{
left: 100px;
top: 400px;
background-color: #ebf448;
}
20%{
left: 150px;
top: 200px;
background-color: #b5f44c;
}
30%{
left: 200px;
top: 400px;
background-color: #62f469;
}
40%{
left: 250px;
top: 200px;
background-color: #71f4c4;
}
50%{
left: 300px;
top: 400px;
background-color: #7fc2f4;
}
60%{
left: 350px;
top: 200px;
background-color: #85a2f4;
}
70%{
left: 400px;
top: 400px;
background-color: #866af4;
}
80%{
left: 450px;
top: 200px;
background-color: #d77cf4;
}
90%{
left: 500px;
top: 400px;
background-color: #f468cc;
}
100%{
left: 550px;
top: 200px;
background-color: #f4627f;
}
}
</style>
</head>
<body>
<div class="div_po">
</div>
</body>
</html>
animation-timing-function 和transition-timing-function还有一个属性steps() 他主要的作用就是将每段关键帧 比如 0%~10% 分为n个阶段展示 也就是允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡
transition-timing-function : 速度曲线||自定义速度曲线|| steps() 这三种 只能设置一个
他有两个参数
-
第一个参数
每个帧是分几个片段展示 (数字) 一般情况下 1~5以内 如果太大了那么就和过度效果没区别了
-
第二个参数 (可以省略)
-
默认
end动画 最后一个帧 的最后片段还没执行完就从新开始了
就跟跑步一样1000米路程 分为10次跑 当跑到990的时候不跑了
-
start动画开始直接是从第一个帧的结束片段开始
就跟跑步一样1000米路程 分为10次跑 我直接从90米开始跑
-
如果当第一个参数大于10 的话基本就看不出来差别了 闪的太快
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" href="images/favicon.ico" type=”image/x-icon”/>
<style>
* {
padding: 0px;
margin: 0px;
}
.div_stary{
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px silver solid;
position: absolute;
left: 300px;
top: 400px;
animation: key 3s steps(2,start) 1 alternate both ;
}
.div_end{
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px silver solid;
position: absolute;
left: 0px;
top: 400px;
animation: key 3s steps(2,end) 1 alternate both ;
}
@keyframes key {
0%{
background-color: #f43a34;
}
30%{
background-color: #f2f466;
}
60%{
background-color: #8d72f4;
}
100%{
background-color: #7a067c;
}
}
</style>
</head>
<body>
<div class="div_end">
<h3>end</h3>
</div>
<div class="div_stary">
<h3>stary</h3>
</div>
</body>
</html>
相同代码情况下end和 start 区别
检测动画是否完成
检测指定标签的动画是否完成 完成后执行 函数里的代码
jquery 这个作用于 animated
$(function () {
$('.dh_Code_block').addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
//css3动画播放完了 再移除这个事件
$(this).removeClass('shake animated');
$(this).hide()
alert('css3运动结束！我是回调函数，没有使用第三方类库！');
});
})
js 这作用于 transition
(function() {
var e = document.getElementsByClassName('sample')[0];
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3运动结束！我是回调函数，没有使用第三方类库！');
});
})();
扫一扫
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
