css animations

Taking what we know about CSS transitions and transforms, there's a third layer...animations.

Sometimes an animated GIF is too much or too little...that's where CSS animations come in. In some cases, it's much better to use CSS since you can have complete control over the animation in the code you can tell it to animate when you want and how you want -- tie it in to DOM/user events. Reduce file size. Change it based on any number of factors.

Hero pearl's keyframed animation: http://perdue-fresh.marriner.com/

.pearlanimated{
					
					background: url(../img/homepage/slider-fresh/pearl-animation-frames-240-optimized.png) 0px 0px no-repeat;
						animation: pecking 1800ms step-start infinite ;//infinite...not working?
					
						 transition: none !important;
						-webkit-transition: none !important;
						width: 240px;
						height: 240px;
				}
				
				@keyframes pecking {
					
				   0%  {  background-position: 0px 0px; }
					35%  { background-position: 0px 0px; }
				   55%  {  background-position: 0px -240px; }
				   65%   { background-position: 0px -480px; }
				   75%  {   background-position: 0px -240px }
					85%  { background-position: 0px 0px; }
				}

Marriner Clarity Scroll Nag:

#scroll_down{
	width: 100px;
	position: absolute;
	margin-left: -50px;
	left: 50%;
	bottom: 40px;	
	display: block;
	z-index: 50;
	text-align: center;
	color: @white;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	opacity: 0.35;
	cursor: pointer;
	 
	 -webkit-transition: opacity 100ms ease-in-out;
    -moz-transition: opacity 100ms ease-in-out;
    transition: opacity 100ms ease-in-out;
	
	div.icon{
		width: 30px;
		height: 79px;
		float: left;
		position: relative;
		margin: 0px 0px 0px 35px;
		padding: 0px 0px 0px 0px;	
		display: block;
		
		&.scroll{
			background: url(../images/clarity_v2/mouse-scroll-sprite.png) 0px 0px no-repeat;
			background-size: cover;	
			animation: mousescroll 900ms steps(6) infinite;
		}
		&.fingerswipe{
			background: url(../images/clarity_v2/swipe-hand.png) 0px 0px  no-repeat;	
			background-size: cover;	
			animation: fingerswipe 800ms steps(20) alternate infinite ;
			-webkit-animation-timing-function: ease-in-out; 
   			 animation-timing-function: ease-in-out;
		}
		
						
				@keyframes mousescroll {
				  from{background-position: 0px 0px;}
					to{background-position: 0px -474px;} 
				}
				
				@keyframes fingerswipe {
				  from{background-position: 0px 0px;}
					to{background-position: 0px 43px;}
					
				}
	}
	
	&:hover{
		opacity: 1 !important;
	}
	
	&.mobile{
		span{
			content: attr(data-mobile);	
		}
	}
	
}

@media screen and (max-width: 960px) {
	#scroll_down{
		width: 50px;
		margin-left: -25px;
		bottom: 20px;	
		
		div.icon{
			width: 15px;
			height: 39px;
			margin: 0px 0px 0px 20px;
			
							
					@keyframes mousescroll {
					  from{background-position: 0px 0px;}
						to{background-position: 0px -237px;} 
					}
					
					@keyframes fingerswipe {
					  from{background-position: 0px 0px;}
						to{background-position: 0px 21.5px;} 
					}
		}
		
		
	}
	
}

Marriner Clarity icon animations

div.animation{
				background-position: 0px 0px;
				background-repeat: no-repeat;
				width: 260px;
				height: 260px;
				float: left;
				position: relative;
				margin: 0px 0px 60px -130px;
				padding: 0px;
				display: block;	
				left: 50%;
				clear: both;
				
				&.compass{
					background-image: url(../images/clarity_v2/compass.png);
					
					.needle{
						background-image: url(../images/clarity_v2/needle.png);
						background-position: center center;
						background-repeat: no-repeat;
						animation: needle 1200ms steps(12) forwards;
						animation-delay: 1000ms;
						
						width: 108px;
						height: 108px;
						float: left;
						position: relative;	
						margin: 0px 0px 0px 0px;
						padding: 0px 0px 0px 0px;
						left: 76px;
						top: 96px;
						display: block;
						
						transform: rotate(-90deg);
					}
					
				}
				
				@keyframes needle {
				  /*  from{transform: rotate(0deg);}
					to{transform: rotate(360deg);
					} */
					
					8% { transform: rotate(-90deg); }
					16% { transform: rotate(-75deg); }
					24% { transform: rotate(-60deg); }
					32% { transform: rotate(-45deg); }
					40% { transform: rotate(-30deg); }
					48% { transform: rotate(-15deg); }
					56% { transform: rotate(0deg); }
					64% { transform: rotate(15deg); }
					72% { transform: rotate(30deg); }
					80% { transform: rotate(15deg); }
					88% { transform: rotate(0deg); }
					94% { transform: rotate(7deg); }
					100% { transform: rotate(0deg); }
				}
				
				&.lightbulb{
					background-image: url(../images/clarity_v2/lightbulb-animation.png);
					width: 268px;
					margin-left: -134px;
					
		
					animation: lightbulb 1200ms steps(9) forwards;
					animation-delay: 1000ms;
				}
				
					@keyframes lightbulb {
					  from{background-position: left 0px;}
						to{background-position: left -2340px;
						} 
					}
					
					
					
				&.key{
					background-image: url(../images/clarity_v2/key-book-animation.png);
					width: 465px;
					margin-left: -233px;
					
		
					animation: key 600ms steps(17) forwards;
					animation-delay: 1000ms;
				}
				
					@keyframes key {
					  from{background-position: left 0px;}
						to{background-position: left -4420px;
						} 
					}
					
					&.quill{
						background-image: url(../images/clarity_v2/quill-and-ink-animation.png);
						width: 624px;
						margin-left: -312px;
						
			
						animation: quill 800ms steps(24) forwards;
						animation-delay: 1000ms;
					}
				
					@keyframes quill {
					  from{background-position: left 0px;}
						to{background-position: left -6240px;
						} 
					}

Open in a New Window