过渡和动画

过渡

transition属性为简写属性

其中主要有四个属性

1、transition-property 该属性规定应用过渡的属性的名称默认是all，

2、transition-duration 定义过渡效果用的时间默认是0

3、transition-timing-function 指定效果的速度，一般取值为linear：是以相同的速度从开始到结束，默认值是ease

4、transition-delay 规定何时开始过渡效果默认是0

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果，用百分比来规定变化发生的时间，或者是

用关键词from 和to，等同于0 100%

扫描二维码关注公众号，回复： 6310935 查看本文章

一般我们用@keyframes'规定动画的样式，后面跟动画的名称，类似选择器的作用

animation-name 规定@keyframes动画的名称

animation-duration 规定动画完成需要的时间

animation-timing-function 规定动画的速度曲线默认是ease

animation-delay 规定动画何时开始，默认是0

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
}

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

通过代码可以了解到动画的一个央视的改变，div里几乎包含了所有的动画属性，通过@keyframes 规定动画的改变

猜你喜欢