css transitions

Change any part of your css, one, multiple or all with a slick and highly customizable and targetable command

Subtle link fades
Hovers
Interactions
Additional classes...

Use them all!

.item{
transition: all 250ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.another{
transition: color 125ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.some{
transition: background-color 125ms  cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

Pick an attribute, set the speed (ms/s), set up some easing, even add delays and more.

But don't think Javascript or jQuery is out of the game! Get creative, use JS to add classes and remove them. Set up your animations and conditions in CSS, then let Javascript handle the more complex adding and subtracting.

For example:

You have a simple hover animation, set it up in CSS only:

a:link{
color: blue;
transition: color 250ms linear;
&:hover{
color: red;
}
}

OK, but I want this item to have one effect on hover and the other non-hovered items to have another effect. Easy.

.item{
 opacity: 1;
 box-shadow: @NoShadow;
 &.current,
 &:hover{
  opacity: 1;
  box-shadow: @Shadow;
 }
 &.ghosted{
  box-shadow: @NoShadow;
  opacity: 0.35;
 }
}

$(".item").mouseenter(function(){
$(this).removeClass('ghosted');
$(".item").not(this).addClass("ghosted");
});
$(".item").mouseleave(function(){
$(".item").removeClass("ghosted");
});

See the callouts on the new NB+C http://nbc2.marriner.com/

That's it! Utilize JS/jQuery where it makes the most sense for speed, performance and more. Use CSS where it's more efficient. You can even do complex nested hovers and interactions with CSS, which is GREAT for menus:

ul#site-main-nav{
		width: ~"calc(100% - 194px - 198px)";
		height: 80px;
		position: absolute;
		left: 164px;
		top: 31px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		
		-webkit-transition: @transitionNavAllFast;
		transition: @transitionNavAllFast;
		li{
			&.top{
				height: 80px;
				float: left;
				position: relative;
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 10px 0px;
				display: block;
				
					a.top:link, a.top:visited{
						height: 80px;
						float: left;
						position: relative;
						margin: 0px 0px 0px 0px;
						padding: 0px 0px 0px 0px;
						text-decoration: none;
						font-size: 20px;
						line-height: 80px;
						font-weight: 900;
						font-family: @NexaRustSans;
						text-transform: uppercase;
						text-align: center;
						display: block;
						color: @perdue-blue;
						letter-spacing: -0.025em;
						-webkit-transition: @transitionNavColor;
						transition: @transitionNavColor;
						text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
						&:hover{
							color: @green;
						}
					}
				&.parent{
					 background: url(../img/nav/fresh/nav-arrow-active.png) center bottom -10px no-repeat;
					  -webkit-transition: @transitionNavAllFast;
					  transition: @transitionNavAllFast;
					.sub-menu{
					  background: #fff;
					  width: 100%;
					  height: auto;
					  max-height: 0px;
					  position: fixed;
					  padding: 0px 0px 0px 0px;
					  left: 0px;
					  top: 111px;
					  display: flex;
					  flex-direction: row;
					  justify-content: center;
					  align-items: center;
					  z-index: 50;
					  overflow: hidden;
					  -webkit-transition: @transitionNavAllFast;
					  transition: @transitionNavAllFast;
					  border-bottom: 0px solid @light-blue-darker;
						
						-webkit-box-shadow: @no-shadow;
						-moz-box-shadow: @no-shadow;
						box-shadow: @no-shadow;
						
						ul.children {
						  width: ~"calc(100% - 0px)";
						  max-width: 1280px;
						  float: left;
						  position: relative;
						  margin: 0px 0px 0px 0px !important;
						  padding: 0px 0px 0px 0px !important;
						  display: flex;
						  flex-direction: row;
						  flex-wrap: nowrap;
						  justify-content: space-around;
						  align-items: center;
						  &.promotions {
							  justify-content: center;
								li.child:nth-child(1) {
								  margin-right: 60px;
								}
							}
							li.child {
							  height: auto;
							  float: left;
							  position: relative;
							  display: block;
								a:link,a:visited {
								  float: left;
								  position: relative;
								  margin: 0px 0px 0px 0px;
								  display: block;
									img {
									  float: left;
									  position: relative;
									  margin: 0px 0px 0px 0px;
									  display: block;
									}
									div.brandname {
									  display: none !important;
									}
								}
								a.cta:link, a.cta:visited{
									height: 30px;
									line-height: 31px;
									font-size: 12px;
									margin: 0px 0px 0px 0px;
									padding: 0px 20px 0px 20px;
								}
								a.text:link, a.text:visited {
								  float: left;
								  position: relative;
								  margin: 0px 0px 0px 0px;
								  padding: 0px 0px 0px 0px;
								  display: block;
								  text-align: center;
								  color: @green; //bright-blue-lighter
								  font-size: 16px;
								  line-height: 16px;
								  font-family: @NexaRustSans;
								  font-weight: 600;
								  text-transform: capitalize;
									-webkit-transition: @transitionNavColor;
									transition: @transitionNavColor;
									&:hover{
										color: @bright-blue-lighter;
									}
								}
								//child
							}
							//children
						}
						
						
						//sub
					}
					&:hover{
						background-position: center bottom 13px;
						a.parent{
							color: @green !important;
						}
						.sub-menu{
							max-height: 500px;
  							padding: 24px 0px 24px 0px;
					  		border-bottom: 1px solid @light-blue-darker;
							
							-webkit-box-shadow: @shadow;
							-moz-box-shadow: @shadow;
							box-shadow: @shadow;
							
							&.lesspad{
								padding: 16px 0px 16px 0px;
							}
							//sub
						}
						//hover
					}
					//parent
				}
			}
			&.mobile-only{
				display: none;
			}
			&.current-section{
				a.top:link, a.top:visited{
					color: @bright-blue-lighter;
				}
			}
			//li
		}
		
		//main-nav
	}

	//mobile nav interaction different than desktop nav by using classes which inherently are controlled by media queries. No extra testing, no extra divs
	$("#site-navigation ul#site-main-nav li").click(function(e){
		if( $(window).width() <= 960){
			//show mobile navs
			e.stopPropagation();
			$("#site-navigation ul#site-main-nav li").not(this).removeClass("subnav-open");
			$(this).toggleClass("subnav-open"); 
		}
	});

Mythbusting CSS animations vs. JS animation speed (hint: jquery can be slower in animation, but not other forms of JS)