CSS3 좌우 흔들림 효과

오늘 이벤트 페이지를 만들 때, 제품은 페이지에 사람들의 주의를 끄는 작은 그림이 좌우로 흔들리는 효과를 추가하려고 하며, 이 효과는 간헐적으로 실행된다.내가 생각하기에는 매우 간단할 것 같은데, 두 말 없이 승낙했으니, 진정으로 실현될 때 비로소 약간의 어려움을 발견할 줄 누가 알았겠는가.그래서 인터넷에서 각종 자료를 찾고 찾는 과정에서 좌우로 흔들릴 수 있는 css3 애니메이션 효과만 발견했을 뿐 간헐적으로 실행할 수 있는 유사한 애니메이션 효과는 없었다.마지막으로 나는 이전에 쓴 간헐적으로 위로 틈이 없이 굴러갈 수 있는 css3의 효과를 생각해냈는데, 가져와 보아도 안 된다.마지막으로SegmentFault에 동업자의 코드가 알려 주었기 때문에 간헐적으로 좌우로 흔들리는 css3 효과를 실현할 수 있습니다.코드는 다음과 같습니다.

.cake{animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom;}

@keyframes move
{
	0%, 65%{ 
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
	70% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	75% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	80% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	85% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	90% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	95% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	100% {  
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
}

@-webkit-keyframes move
{
	0%, 65%{ 
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
	70% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	75% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	80% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	85% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	90% {  
	  -webkit-transform:rotate(6deg);
	  transform:rotate(6deg);
	}
	95% {  
	  -webkit-transform:rotate(-6deg);
	  transform:rotate(-6deg);
	}
	100% {  
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
}

원리는 먼저 애니메이션 효과를 완성하는 시간을 길게 설정하는 것이다. 문장에서 3s를 사용한 다음에 애니메이션이 시작된 몇 초 동안 아무런 동작도 하지 않는다. 즉, 0%에서 65% 사이에 아무런 동작도 하지 않고 그의 rotate 각도를 계속 0deg(사실 0%에서 65% 사이에 좌우로 흔들리는 애니메이션도 실행되고 흔들리는 각도만 0deg이기 때문에 이 진도에서 우리는 실제 애니메이션 효과를 볼 수 없다).애니메이션의 진도가 70%에 이르렀을 때 동작을 시작하면 나머지 시간은 우리가 볼 수 있는 좌우 흔들림 애니메이션의 실행 시간이다.
감사https://segmentfault.com/q/1010000000321090이곳의 네티즌들의 해답이 주는 영감.
소스 코드는 다음과 같습니다.
CSS3 간헐 좌우 흔들기 효과