前端·CSS总结（二）视觉

一、动画（animation）（CSS3）

动画抵达的过程是连续的，还原的过程是突发的。放完了就还原，就是这么任性。
在这里插入图片描述

1.1 定义动画

定义动画可以用from-to的两个定点形式，也可用百分比（0%、50%、100%）的多个定点形式。

/* 定义动画 */

@keyframes toRight {
   
    from {
   
        left: 0px;
        top: 0px;
        background-color: red;
    }
    to {
   
        left: 130px;
        top: 0px;
        background-color: blue;
    }
}

1.2 引用动画

我们先定义一个div块，class为animation。然后对这个div块引用动画效果。

/* HTML部分 */

<div class="animation"></div>

/* 定义div块的默认样式 */

.animation {
   
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}

/* 引用动画 当鼠标悬于div块上方时触发动画效果 */

.animation:hover {
   
    animation: toRight 5s;
}

1.3 多个动画

设置多个帧（@keyframes）,使用不同的名字。在引用动画的时候不同的帧用逗号隔开。

animation: toRight 5s,toTop 5s;

1.4 更多属性

下面是一个完整的属性应用和属性说明。

animation:walk 2s ease 1s 2 normal running forwards;
animation-name:keyframename/none;
animation-duration:time;
animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-
bezier(n,n,n,n);
animation-delay:time;
animation-iteration-count:n/infinite;
animation-direction:normal/alternate;
animation-play-state:paused/running;
animation-fill-mode:none/forwards/backwards/both;

二、过渡（transition）（CSS3）

过渡一直是连续的，无论是抵达的过程，还是还原的过程。

2.1 定义首尾

/* HTML */

<div class="transition"></div>

/* 定义首 默认样式 */

.transition {
   
    width: 100px;
    height: 100px;
    background-color: red;
}

/* 定义尾 目标样式 */

.transition:hover {
   
    width: 200px;
}

2.2 应用过渡

.transition {
   
    width: 100px;
    height: 100px;
    background-color: red;
	transition: width 2s;  /* 只需添加这一条 */
}

2.3 多个过渡

transition: width 5s,