Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Types of 2D transition on hover effects

    @joshi.manish
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.58k
    Comment on it

    If you want to apply 2D transition on your buttons and anchor tag on hover effect, then code below might be helpful for you

    HTML:

    <div class="container">
	<div class="2d_transition">
		<h2>Types of 2D Transition</h2>
		<a href="#" class="hvr-grow transition">Grow</a>
		<a href="#" class="hvr-shrink transition">shrink</a>
		<a href="#" class="hvr-pulse transition">Pulse</a>
		<a href="#" class="hvr-pulse-grow transition">Pulse Grow</a>
		<a href="#" class="hvr-pulse-shrink transition">Pulse Shrink</a>
		<a href="#" class="hvr-push transition">Push</a>
		<a href="#" class="hvr-pop transition">Pop</a>
		<a href="#" class="hvr-bounce-in transition">Bounce In</a>
		<a href="#" class="hvr-bounce-out transition">Bounce Out</a>
		<a href="#" class="hvr-rotate transition">Rotate</a>
		<a href="#" class="hvr-grow-rotate transition">Grow Rotate</a>
		<a href="#" class="hvr-float transition">Float</a>
		<a href="#" class="hvr-sink transition">Sink</a>
		<a href="#" class="hvr-bob transition">Bob</a>
		<a href="#" class="hvr-hang transition">Hang</a>
		<a href="#" class="hvr-skew transition">Skew</a>
		<a href="#" class="hvr-skew-forward transition">Skew Forward</a>
		<a href="#" class="hvr-skew-backward transition">Skew Backward</a>
		<a href="#" class="hvr-wobble-horizontal transition">Wobble Horizontal</a>
		<a href="#" class="hvr-wobble-vertical transition">Wobble Vertical</a>
		<a href="#" class="hvr-wobble-to-bottom-right transition">Wobble To Bottom Right</a>
		<a href="#" class="hvr-wobble-to-top-right transition">Wobble To Top Right</a>
		<a href="#" class="hvr-wobble-top transition">Wobble Top</a>
		<a href="#" class="hvr-wobble-bottom transition">Wobble Bottom</a>
		<a href="#" class="hvr-wobble-skew transition">Wobble Skew</a>
		<a href="#" class="hvr-buzz transition">Buzz</a>
		<a href="#" class="hvr-buzz-out transition">Buzz Out</a>
	</div>
</div>

    CSS:

    	.container{
		width: 90%;
		margin: auto;
	}
	.transition {
		background: #151515 none repeat scroll 0 0;
		color: #fff;
		cursor: pointer;
		margin:10px 5px;
		padding: 10px 20px;
		display: inline-block;
		text-decoration: none;
		font-size: 14px;
		text-transform: uppercase;
		border: 1px solid red;
	}
/*==== grow and shrink ====*/
	.hvr-grow,
	.hvr-shrink {
		display: inline-block;
		vertical-align: middle;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-osx-font-smoothing: grayscale;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
	}
	.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
	    -webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
		webkit-transform: scale(0.1);
	   transform: scale(0.9);
	}
/*==== pluse ====*/
	@keyframes hvr-pulse {
	25% {
	    transform: scale(1.1);
	}
	75% {
	    transform: scale(0.9);
	}
	}
	
	.hvr-pulse {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
	    animation-duration: 1s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse;
	    animation-timing-function: linear;
	}
/*==== pluse-grow ====*/
	@keyframes hvr-pulse-grow {
	100% {
	    transform: scale(1.1);
	}
	}
	.hvr-pulse-grow {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
	    animation-direction: alternate;
	    animation-duration: 0.3s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse-grow;
	    animation-timing-function: linear;
	}
/*==== pluse-shrink ====*/
	@keyframes hvr-pulse-shrink {
	100% {
	    transform: scale(0.9);
	}
	}
	
	.hvr-pulse-shrink {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
	    animation-direction: alternate;
	    animation-duration: 0.3s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-pulse-shrink;
	    animation-timing-function: linear;
	}
/*==== push ====*/
	@keyframes hvr-push {
	50% {
	    transform: scale(0.8);
	}
	100% {
	    transform: scale(1);
	}
	}
		
	.hvr-push {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-push:hover, .hvr-push:focus, .hvr-push:active {
	    animation-duration: 0.3s;
	    animation-iteration-count: 1;
	    animation-name: hvr-push;
	    animation-timing-function: linear;
	}
/*==== pop ====*/
	@keyframes hvr-pop {
	50% {
	    transform: scale(1.2);
	}
	}

	.hvr-pop {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
	    animation-duration: 0.3s;
	    animation-iteration-count: 1;
	    animation-name: hvr-pop;
	    animation-timing-function: linear;
	}
/*==== bounce in ====*/
	.hvr-bounce-in {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.5s;
	    vertical-align: middle;
	}
	.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
	    transform: scale(1.2);
	    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}
/*==== bounce out ====*/
	.hvr-bounce-out {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.5s;
	    vertical-align: middle;
	}
	.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active {
	    transform: scale(0.8);
	    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}
/*==== rotate ====*/
	.hvr-rotate {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
	    transform: rotate(4deg);
	}
/*==== grow-rotate ====*/
	.hvr-grow-rotate {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
	    transform: scale(1.1) rotate(4deg);
	}
/*==== float ====*/
	.hvr-float {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    transition-timing-function: ease-out;
	    vertical-align: middle;
	}
	.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
	    transform: translateY(-8px);
	}
/*==== sink ====*/
	.hvr-sink {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    transition-timing-function: ease-out;
	    vertical-align: middle;
	}
	.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
	    transform: translateY(8px);
	}
/*==== bob ====*/
	@keyframes hvr-bob {
	0% {
	    transform: translateY(-8px);
	}
	50% {
	    transform: translateY(-4px);
	}
	100% {
	    transform: translateY(-8px);
	}
	}
	@keyframes hvr-bob-float {
	100% {
	    transform: translateY(-8px);
	}
	}
	.hvr-bob {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
	    animation-delay: 0s, 0.3s;
	    animation-direction: normal, alternate;
	    animation-duration: 0.3s, 1.5s;
	    animation-fill-mode: forwards;
	    animation-iteration-count: 1, infinite;
	    animation-name: hvr-bob-float, hvr-bob;
	    animation-timing-function: ease-out, ease-in-out;
	}
/*==== hang ====*/
	@keyframes hvr-hang {
	0% {
	    transform: translateY(8px);
	}
	50% {
	    transform: translateY(4px);
	}
	100% {
	    transform: translateY(8px);
	}
	}
	@keyframes hvr-hang-sink {
	100% {
	    transform: translateY(8px);
	}
	}
	.hvr-hang {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active {
	    animation-delay: 0s, 0.3s;
	    animation-direction: normal, alternate;
	    animation-duration: 0.3s, 1.5s;
	    animation-fill-mode: forwards;
	    animation-iteration-count: 1, infinite;
	    animation-name: hvr-hang-sink, hvr-hang;
	    animation-timing-function: ease-out, ease-in-out;
	}
/*==== skew ====*/
	.hvr-skew {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active {
	    transform: skew(-10deg);
	}
/*==== skew forward ====*/
	.hvr-skew-forward {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active {
	    transform: skew(-10deg);
	}
/*==== skew-backward ====*/
	.hvr-skew-backward {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    transition-duration: 0.3s;
	    transition-property: transform;
	    vertical-align: middle;
	}
	.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active {
	    transform: skew(10deg);
	}
/*==== wobble-vertical ====*/
	@keyframes hvr-wobble-vertical {
	16.65% {
	    transform: translateY(8px);
	}
	33.3% {
	    transform: translateY(-6px);
	}
	49.95% {
	    transform: translateY(4px);
	}
	66.6% {
	    transform: translateY(-2px);
	}
	83.25% {
	    transform: translateY(1px);
	}
	100% {
	    transform: translateY(0px);
	}
	}
	.hvr-wobble-vertical {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-vertical;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-horizontal ====*/
	@keyframes hvr-wobble-horizontal {
	16.65% {
	    transform: translateX(8px);
	}
	33.3% {
	    transform: translateX(-6px);
	}
	49.95% {
	    transform: translateX(4px);
	}
	66.6% {
	    transform: translateX(-2px);
	}
	83.25% {
	    transform: translateX(1px);
	}
	100% {
	    transform: translateX(0px);
	}
	}
	.hvr-wobble-horizontal {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-horizontal;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-to-bottom-right ====*/
	@keyframes hvr-wobble-to-bottom-right {
	16.65% {
	    transform: translate(8px, 8px);
	}
	33.3% {
	    transform: translate(-6px, -6px);
	}
	49.95% {
	    transform: translate(4px, 4px);
	}
	66.6% {
	    transform: translate(-2px, -2px);
	}
	83.25% {
	    transform: translate(1px, 1px);
	}
	100% {
	    transform: translate(0px, 0px);
	}
	}
	.hvr-wobble-to-bottom-right {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-to-bottom-right;
	    animation-timing-function: ease-in-out;
	}
/*==== wobble-to-top-right =====*/
	@keyframes hvr-wobble-to-top-right {
	16.65% {
	    transform: translate(8px, -8px);
	}
	33.3% {
	    transform: translate(-6px, 6px);
	}
	49.95% {
	    transform: translate(4px, -4px);
	}
	66.6% {
	    transform: translate(-2px, 2px);
	}
	83.25% {
	    transform: translate(1px, -1px);
	}
	100% {
	    transform: translate(0px, 0px);
	}
	}
	.hvr-wobble-to-top-right {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-to-top-right;
	    animation-timing-function: ease-in-out;
	}

/*==== wobble-top ====*/ 
	.hvr-wobble-top {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 0 100% 0;
	    vertical-align: middle;
	}
	.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: wobble-top;
	    animation-timing-function: ease-in-out;
	}

	@-webkit-keyframes wobble-top {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}

	@keyframes wobble-top{
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}
/*===== wobble-bottom =====*/
	.hvr-wobble-bottom {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    transform-origin: 100% 0 0;
	    vertical-align: middle;
	}
	.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active {
		animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: wobble-bottom;
	    animation-timing-function: ease-in-out;
	}
	@-webkit-keyframes wobble-bottom {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}

	@keyframes wobble-bottom {
	  16.65% {
	    -webkit-transform: skew(-12deg);
	    transform: skew(-12deg);
	  }

	  33.3% {
	    -webkit-transform: skew(10deg);
	    transform: skew(10deg);
	  }

	  49.95% {
	    -webkit-transform: skew(-6deg);
	    transform: skew(-6deg);
	  }

	  66.6% {
	    -webkit-transform: skew(4deg);
	    transform: skew(4deg);
	  }

	  83.25% {
	    -webkit-transform: skew(-2deg);
	    transform: skew(-2deg);
	  }

	  100% {
	    -webkit-transform: skew(0);
	    transform: skew(0);
	  }
	}
/*==== wobble-skew =====*/
	@keyframes hvr-wobble-skew {
	16.65% {
	    transform: skew(-12deg);
	}
	33.3% {
	    transform: skew(10deg);
	}
	49.95% {
	    transform: skew(-6deg);
	}
	66.6% {
	    transform: skew(4deg);
	}
	83.25% {
	    transform: skew(-2deg);
	}
	100% {
	    transform: skew(0deg);
	}
	}
	.hvr-wobble-skew {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active {
	    animation-duration: 1s;
	    animation-iteration-count: 1;
	    animation-name: hvr-wobble-skew;
	    animation-timing-function: ease-in-out;
	}
/*=== buzz ====*/
	@keyframes hvr-buzz {
	50% {
	    transform: translateX(3px) rotate(2deg);
	}
	100% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	}
	.hvr-buzz {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
	    animation-duration: 0.15s;
	    animation-iteration-count: infinite;
	    animation-name: hvr-buzz;
	    animation-timing-function: linear;
	}
/*=== buzz-out ===*/
	@keyframes hvr-buzz-out {
	10% {
	    transform: translateX(3px) rotate(2deg);
	}
	20% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	30% {
	    transform: translateX(3px) rotate(2deg);
	}
	40% {
	    transform: translateX(-3px) rotate(-2deg);
	}
	50% {
	    transform: translateX(2px) rotate(1deg);
	}
	60% {
	    transform: translateX(-2px) rotate(-1deg);
	}
	70% {
	    transform: translateX(2px) rotate(1deg);
	}
	80% {
	    transform: translateX(-2px) rotate(-1deg);
	}
	90% {
	    transform: translateX(1px) rotate(0deg);
	}
	100% {
	    transform: translateX(-1px) rotate(0deg);
	}
	}
	.hvr-buzz-out {
	    backface-visibility: hidden;
	    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	    display: inline-block;
	    transform: translateZ(0px);
	    vertical-align: middle;
	}
	.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
	    animation-duration: 0.75s;
	    animation-iteration-count: 1;
	    animation-name: hvr-buzz-out;
	    animation-timing-function: linear;
	}

    see the live demo at  http://manishjoshi123.github.io/

    I have attached the full code packet at the bottom

    html css3 2D transition
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: