CSS3的过渡和动画

jiedinghui 2020-01-08

在css3中可以实现很多一些动态效果,css3逐步取代了Flash,可以通过他带来的新特性帮助我们轻易解决一些问题,例如图片的圆角可以直接使用border-radius就可以解决,无需再使用ps解决,并且css3可以减少开发和维护成本,并且还能提高页面性能,因为一些动态效果我们不需要再去使用JS就可以完成

过渡:transition

过渡是什么?

我的理解是,当一个元素通过某个条件触发时(例如:hover)改变成另一个属性的过程,更通俗一点来说就是一个人起床到下床,总不会直接就蹦起来准备出门吧,而中间这个穿衣服和洗漱正是过渡的操作

.box{
width: 120px;
height: 120px;
border:10px solid;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.box:hover{
left: 50px;
top: 120px;
background: #742;
border: 20px solid #456;
}

transition:all 0.3s  可以解释为一切变化都用0.3s完成

接下来分解transition

transition-property:设置过得的属性

transition-duration:设置过渡所需的时间

transition-timing-function:  ease(默认过渡样式)

          linear 线性过渡

          ease-in  过渡由慢到快

          ease-out 过渡由快到慢

          ease-in-out 过渡线慢再快

过渡还可以多写

例:transition:margin-left  3s,margin-top  5s;

动画:animiation

这个是干啥的呢?

可以重复并且在相应帧做不同的和多种动画

animiation需要搭配keyframes来使用,

例:

@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -2400px 0;
}
}
.house{
width: 200px;
height: 100px;
background: url(img.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: run 1s infinite steps(12,end) forwards;
};

先解释 keyframes的作用

标准格式  @keyframes  运动name{

   这里有两种写法:

    第一种:

    form{

    background:red     这里表示运动开始的状态,一开始背景颜色为红色  

      }

    to{

      background:#000    表示最后为黑色

      }

    第二种(相应帧)这种通过百分比的可以更细致的规划相应的变化

     0%{

     background:red

    }  

      50%{

     background:#000

    } 

    100%{

     background:blue

    }

}

然后通过animiation来引用

 animiation: 运动名  5s(运动时间) infinite(表示重复播放,不写则只播放一次) step(步数(每个状态切换的步数),end(end表示丢失最后一帧,白柳当前帧的状态,若为start表示丢失第一帧,保留下一帧) forwards(表示当运动结束后保留最后一整的状态,不写则动画结束后回归原始样式) alternate(表示动画倒放))

以上是animiation的多写格式

分布来说:

animiation-name:运动名(也就是keyframes的运动名)

animiation-duration:表示运动时间

animiation-timing-function:linaer 表示线性渐变,这里和过渡的变化一致的

animiation-delay:2s  表示延时2s才开始运动

animiation-itearation-count:2  表示执行2次动画

在animiation中也有hover属性;

animiation-play-state:paused  暂停该动画

相关推荐