Day6-css3动画-2022-12-13

css3动画

1. 定义动画

 /* 两个关键帧 */
@keyframes r1 {
	from {
	transform: rotate(0);
	}
	to {
	transform: rotate(360deg);
	}
}

 /* 两个关键帧 */
@keyframes r2 {
     from {
          transform: translateX(0px);
      }
      to {
          transform:translateX(200px);
      }
        }

 /* 6个关键帧 */
@keyframes r3{
	0% {
	background-color: red ;
	}
	20% {
	background-color: yellow ;
	}
	40% {
	background-color: blue ;
	}
	60% {
	background-color: green;
	}
	80% {
	background-color: purple ;
	}
	100% {
	background-color: orange;
	}
}

 @keyframes r4 {
    from {
         opacity: 1; 
     }
     to {
         opacity: 0;
      }
    }

2.调用

.box2{
	animation: r1 1s linear 2s infinite alternate;
	width: 100px;
	height: 100px;
	background: yellow;
	}

今日总结：还是要坚持做一件事情啊