/* Reference: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes */
.cv-effect-rock {
	position :relative;
	-webkit-animation: cv-frame-rock 8s infinite; /* Safari 4.0 - 8.0 */
	animation: cv-frame-rock 8s infinite;
}

.cv-effect-slide {
	position :relative;
	-webkit-animation: cv-frame-slide 8s infinite; /* Safari 4.0 - 8.0 */
	animation: cv-frame-slide 8s infinite;
}

.cv-effect-spin {
	position :relative;
	-webkit-animation: cv-frame-spin 8s infinite; /* Safari 4.0 - 8.0 */
	animation: cv-frame-spin 8s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cv-frame-slide {
	0%    {top:    0px; left: 0px;   }
	10%   {top:    0px; left: 200px; }
	20%   {top:    0px; left: 0px;   }
	30%   {top:    0px; left: 100px; }
	40%   {top:    0px; left: 0px;   }
	50%   {top:    0px; left: 50px;  }
	60%   {top:    0px; left: 0px;   }
	70%   {top:    0px; left: 200px; }
	80%   {top:    0px; left: 0px;   }
	90%   {top:    0px; left: 100px; }
	100%  {top:    0px; left: 0px;   }
}
/* Standard syntax */
@keyframes cv-frame-slide {
	0%    {top:    0px; left: 0px;   }
	10%   {top:    0px; left: 200px; }
	20%   {top:    0px; left: 0px;   }
	30%   {top:    0px; left: 100px; }
	40%   {top:    0px; left: 0px;   }
	50%   {top:    0px; left: 50px;  }
	60%   {top:    0px; left: 0px;   }
	70%   {top:    0px; left: 200px; }
	80%   {top:    0px; left: 0px;   }
	90%   {top:    0px; left: 100px; }
	100%  {top:    0px; left: 0px;   }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cv-frame-rock {
	0%    {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	10%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	20%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	30%   {-ms-transform: rotate(-15deg);  -webkit-transform: rotate(-15deg);  transform: rotate(-15deg);}
	40%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	50%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	60%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	70%   {-ms-transform: rotate(-15deg);  -webkit-transform: rotate(-15deg);  transform: rotate(-15deg);}
	80%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	90%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	100%  {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
}
/* Standard syntax */
@keyframes cv-frame-rock {
	0%    {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	10%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	20%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	30%   {-ms-transform: rotate(-15deg);  -webkit-transform: rotate(-15deg);  transform: rotate(-15deg);}
	40%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	50%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	60%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	70%   {-ms-transform: rotate(-15deg);  -webkit-transform: rotate(-15deg);  transform: rotate(-15deg);}
	80%   {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	90%   {-ms-transform: rotate(15deg);   -webkit-transform: rotate(15deg);   transform: rotate(15deg);}
	100%  {-ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cv-frame-spin {
	0%    {-ms-transform: rotate(0deg);     -webkit-transform: rotate(0deg);     transform: rotate(0deg);}
	10%   {-ms-transform: rotate(-15deg);   -webkit-transform: rotate(-15deg);   transform: rotate(-15deg);}
	20%   {-ms-transform: rotate(30deg);    -webkit-transform: rotate(30deg);    transform: rotate(30deg);}
	30%   {-ms-transform: rotate(-60deg);   -webkit-transform: rotate(-60deg);   transform: rotate(-60deg);}
	40%   {-ms-transform: rotate(120deg);   -webkit-transform: rotate(120deg);   transform: rotate(120deg);}
	45%   {-ms-transform: rotate(-240deg);  -webkit-transform: rotate(-240deg);  transform: rotate(-240deg);}
	50%   {-ms-transform: rotate(480deg);   -webkit-transform: rotate(480deg);   transform: rotate(480deg);}
	55%   {-ms-transform: rotate(-480deg);  -webkit-transform: rotate(-480deg);  transform: rotate(-480deg);}
	60%   {-ms-transform: rotate(240deg);   -webkit-transform: rotate(240deg);   transform: rotate(240deg);}
	65%   {-ms-transform: rotate(-120deg);  -webkit-transform: rotate(-120deg);  transform: rotate(-120deg);}
	70%   {-ms-transform: rotate(60deg);    -webkit-transform: rotate(60deg);    transform: rotate(60deg);}
	80%   {-ms-transform: rotate(-30deg);   -webkit-transform: rotate(-30deg);   transform: rotate(-30deg);}
	90%   {-ms-transform: rotate(15deg);    -webkit-transform: rotate(15deg);    transform: rotate(15deg);}
	100%  {-ms-transform: rotate(0deg);     -webkit-transform: rotate(0deg);     transform: rotate(0deg);}
}
/* Standard syntax */
@keyframes cv-frame-spin {
	0%    {-ms-transform: rotate(0deg);     -webkit-transform: rotate(0deg);     transform: rotate(0deg);}
	10%   {-ms-transform: rotate(-15deg);   -webkit-transform: rotate(-15deg);   transform: rotate(-15deg);}
	20%   {-ms-transform: rotate(30deg);    -webkit-transform: rotate(30deg);    transform: rotate(30deg);}
	30%   {-ms-transform: rotate(-60deg);   -webkit-transform: rotate(-60deg);   transform: rotate(-60deg);}
	40%   {-ms-transform: rotate(120deg);   -webkit-transform: rotate(120deg);   transform: rotate(120deg);}
	45%   {-ms-transform: rotate(-240deg);  -webkit-transform: rotate(-240deg);  transform: rotate(-240deg);}
	50%   {-ms-transform: rotate(480deg);   -webkit-transform: rotate(480deg);   transform: rotate(480deg);}
	55%   {-ms-transform: rotate(-480deg);  -webkit-transform: rotate(-480deg);  transform: rotate(-480deg);}
	60%   {-ms-transform: rotate(240deg);   -webkit-transform: rotate(240deg);   transform: rotate(240deg);}
	65%   {-ms-transform: rotate(-120deg);  -webkit-transform: rotate(-120deg);  transform: rotate(-120deg);}
	70%   {-ms-transform: rotate(60deg);    -webkit-transform: rotate(60deg);    transform: rotate(60deg);}
	80%   {-ms-transform: rotate(-30deg);   -webkit-transform: rotate(-30deg);   transform: rotate(-30deg);}
	90%   {-ms-transform: rotate(15deg);    -webkit-transform: rotate(15deg);    transform: rotate(15deg);}
	100%  {-ms-transform: rotate(0deg);     -webkit-transform: rotate(0deg);     transform: rotate(0deg);}
}