アニメーションとトランジションの違い

アニメーション

/*1.animation-name:指定动画名称*/
animation-name: moveTest;
/*2.设置动画的总耗时*/
animation-duration: 2s;
/*3.动画的时间函数*/
animation-timing-function: linear;
/*4.设置动画的延迟*/
animation-delay: 0s;
/*5.设置动画的播放次数，默认为1次  可以指定具体的数值，也可以指定infinite(无限次)*/
animation-iteration-count: infinite;
/*6.设置交替动画  alternate:来回交替*/
animation-direction: alternate;
/*7.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/
animation-fill-mode: both;
/*8.设置动画的播放状态  paused:暂停   running:播放*/
animation-play-state: running;
/*简写*/
animation: moveTest 2s linear 0s infinite alternate both;
@keyframes moveTest {
    
    
   0% {
    
     xx }
   50%{
    
     xx }
   100%{
    
     xx }
}

遷移

遷移によって不透明度を0から1に変更するには2秒かかります

li {
    
    
   .hover-content {
    
    
        position: absolute;
        right: 12px;
        bottom: 28px;
        opacity: 0;
        transition: opacity 2s ;
	}
 	&:hover .hover-content {
    
    
        opacity:1
    }
}

まとめ
1.トランジションは、スタイル値を変更するプロセスであるトランジションです。開始と終了のみ（2フレームのみ）です。アニメーションを@keyframesと組み合わせて、各フレームの状態を設定
できます。2。@ keyframesを使用したアニメーションはトリガー時間なしでトリガーされるこのプロセス、および遷移はホバーまたはjsイベントを介してトリガーする必要があります。3
。アニメーションは、サイクル数、アニメーション終了の状態など、多くのプロパティを設定できます。遷移は1回だけトリガーできます。 ;