CSS之动画

版权声明:转载请注明出处 https://blog.csdn.net/zn740395858/article/details/77988670
       最近在学习饿了么vue的demo,接触到了挺多css3动画,之前有学习过,但更多是需要了就拿出来看看,直接上手用,今天来对三种动画属性进行系统学习。

css3动画主要包括Transform、Transition、Animation。

区别

  • transition:允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件(hover事件或者click事件)才会随时间改变其css属性。
  • animation:不需要触发任何时间的情况下也可以显示地随时间变化来改变元素css的属性值,从而达到动画效果

animation

属性

1、animation-name:用来定义一个动画的名称,这边的name必须和@keyframes的name一致
2、animation-duration:指定元素播放动画所持续的时间长,单位为:s,默认值为:0
3、animation-timing-function:动画的播放方式

  • ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  • linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  • ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)

4、animation-delay:指定元素动画开始的时间,也就是说当改变元素属性值后多长时间开始执行animation效果。单位为:s,默认为:0
5、animation-iteration-count:指定元素播放动画的循环次数,默认为:1,infinite:无限次数循环
6、animation-direction:指定元素动画播放的方向。默认值为:normal,动画的每次循环都是向前播放;另一个值为:alternate,动画播放在第偶数次向前播放,第奇数次向反方向播放。
7、animation-play-state:控制元素动画的播放状态。两个值:running和paused,其中running为默认值。
这里写图片描述

keyframes

关键帧,将指定时间段内的动画划分的更为精细一些

@keyframes animationname {
    keyframes-selector {
        css-styles;
    }
}
  1. .animationname:声明动画的名称。
  2. keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 “from” 和 “to”的形式。”from” 和 “to”的形式等价于 0% 和 100%。
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

由于keyframes较难理解,在此用了w3school中的一个案例进行分析@keyframes 规则,具体效果可以点击链接进行查看。
keyframes跟flash类似,每一次的百分比就如同flash中的每一个帧,但是flash是需要每一帧每一帧进行动画效果比拟,而keyframes随时间变化来改变元素css的属性值,百分比是指在动画时间内的百分之多少进行变化。
在此案例中:animation:mymove 5s infinite;设置了动画名称为mymove,所持续时间为5s,无限循环。
则keyframes中的百分比(0%,25%,50%,75%,100%)就对应着(0s,1.25s,2.5s,3.75s,5s)

  • 当执行到0s时,top:0px; left:0px; background:red;
  • 当执行到1.25s时,top:0px; left:100px; background:blue;
  • 当执行到2.5s时,top:100px; left:100px; background:yellow;
  • 当执行到3.75s时,top:100px; left:0px; background:green;
  • 当执行到5s时,top:0px; left:0px; background:red;

在整个动画过程中,动画后面的会覆盖前面的属性值。动画结束后样式会回到默认效果。在每一个百分比的css样式会有一个animation渐变过程,让元素达到一种在不断变化的效果。

阅读更多
换一批

没有更多推荐了,返回首页