@keyframes animation-sample{
    0%{
        width: 20%;
    }
    50%{
        width: 19%
    }
    100%{
        width: 20%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



.spin {
	animation: spin 1s linear 1;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}


.spin2 {		/*--カレー--*/
    animation: swingEfect2 linear 1s 2;
    transform-origin:50% 50%;
    display: block;
}
@keyframes swingEfect2 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    50% { transform: rotate(-180deg); }
    75% { transform: rotate(-270deg); }
    100% { transform: rotate(-360deg); }
}

.swing {		/*--カレー--*/
    animation: swingEfect2 linear 10s infinite;
    transform-origin:50% 50%;
    display: block;
}
@keyframes swingEfect3 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-45deg); }
    50% { transform: rotate(0deg); }
    25% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
}