Why doesn't my animation "roll back" (animated) when the mouse leaves the button, just like it does when the mouse enters the button?
.container {
padding: 20px 0 0 10px;
}
.button {
color: #ffffff;
background: #71b3c7;
text-decoration: none;
-webkit-backface-visibility: hidden;
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
position: relative;
text-align: center;
padding: 8px 14px;
font-size: 20px;
text-transform: uppercase;
font-family: "Open Sans", Arial, sans-serif;
font-weight: bold;
letter-spacing: 1.4px;
}
.button span {
position: relative;
z-index: 2;
}
.button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transform: scale3d(0.1, 1, 1);
transform: scale3d(0.1, 1, 1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform-origin-x: 0;
}
.button:hover {
color: #fff;
}
.button:hover:before {
opacity: 1;
background: #2a9276;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<div class="container">
<span>button</span>
</div>
CodePen link
Related
This is is what I have coded so far Codepen.
Can ignore the background images and other elements. Just need to get the animation for the heading (i.e. in yellow) and the list below right. Any ideas on how to improve this?
body {
background-color: purple;
}
h1 {
text-align: center;
text-transform: uppercase;
background-color: transparent;
color: yellow;
width: auto;
transform: translate3d(0, 200px, 0);
font-size: 42px;
line-height: 48px;
}
h1 span {
opacity: 0;
display: inline-block;
transform: translateY(10px);
}
ul {
list-style: none;
margin: 50px auto 0 auto;
padding: 0;
width: 300px;
opacity: 0;
}
ul li {
list-style: none;
padding: 15px;
border: solid 1px #fff;
margin-bottom: 10px;
border-radius: 15px;
cursor: pointer;
color: #fff;
transition: all 0.5s ease;
}
ul li:hover {
background-color: #fff;
color: #333;
}
#keyframes slideUpHeading {
from {
transform: translate3d(0, 200px, 0);
font-size: 42px;
line-height: 48px;
}
to {
font-size: 24px;
line-height: 30px;
transform: translate3d(0, 0, 0);
}
}
.slideUpHeading {
animation-name: slideUpHeading;
animation-delay: 2s;
animation-duration: 0.6s;
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(1, 1, 2, 2);
}
#keyframes slideUpText {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slideUpText {
animation-name: slideUpText;
animation-duration: 0.6s;
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.5);
}
.animation_delay1 {
animation-delay: 0.2s;
}
.animation_delay2 {
animation-delay: 0.45s;
}
.animation_delay3 {
animation-delay: 0.9s;
}
.animation_delay4 {
animation-delay: 1.2s;
}
#keyframes slideUpList {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slideUpList {
animation-name: slideUpList;
animation-duration: 0.6s;
animation-delay: 2.65s;
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.2);
}
<h1 class="slideUpHeading">
<span class="slideUpText animation_delay1">Lorem</span><br>
<span class="slideUpText animation_delay2">ipsum</span><br>
<span class="slideUpText animation_delay3">dolor sit</span><br>
<span class="slideUpText animation_delay4">amet</span>
</h1>
<ul class="slideUpList">
<li>consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
</ul>
Everything looks good except bottom list animation delay. I have adjusted that along with all animation duration.. have a look.
body {
background-color: purple;
font-family: 'Archivo Black', sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
background-color: transparent;
color: yellow;
width: auto;
transform: translate3d(0, 200px, 0);
font-size: 42px;
line-height: 48px;
}
h1 span {
opacity: 0;
display: inline-block;
transform: translateY(10px);
}
ul {
list-style: none;
margin: 50px auto 0 auto;
padding: 0;
width: 300px;
opacity: 0;
}
ul li {
list-style: none;
padding: 15px;
border: solid 1px #fff;
margin-bottom: 10px;
border-radius: 15px;
cursor: pointer;
color: #fff;
transition: all 0.5s ease;
}
ul li:hover {
background-color: #fff;
color: #333;
}
#keyframes slideUpHeading {
from {
transform: translate3d(0, 200px, 0);
font-size: 42px;
line-height: 48px;
}
to {
font-size: 24px;
line-height: 30px;
transform: translate3d(0, 0, 0);
}
}
.slideUpHeading {
animation-name: slideUpHeading;
animation-delay: 2s;
animation-duration: 0.4s; /* It was 0.6s */
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(1, 1, 2, 2);
}
#keyframes slideUpText {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slideUpText {
animation-name: slideUpText;
animation-duration: 0.4s; /* It was 0.6s */
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.5);
}
.animation_delay1 {
animation-delay: 0.2s;
}
.animation_delay2 {
animation-delay: 0.45s;
}
.animation_delay3 {
animation-delay: 0.9s;
}
.animation_delay4 {
animation-delay: 1.2s;
}
#keyframes slideUpList {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slideUpList {
animation-name: slideUpList;
animation-duration: 0.4s; /* It was 0.6s */
animation-delay: 2.20s; /* It was 2.65s */
transform-origin: center bottom;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.17, 0.88, 0.32, 1.2);
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fredoka+One&display=swap" rel="stylesheet">
<h1 class="slideUpHeading">
<span class="slideUpText animation_delay1">which</span><br>
<span class="slideUpText animation_delay2">statement</span><br>
<span class="slideUpText animation_delay3">best describes</span><br>
<span class="slideUpText animation_delay4">you?</span> <!-- Added : question mark ;) -->
</h1>
<ul class="slideUpList">
<li>Picking up a new skill</li>
<li>Picking up a new skill</li>
<li>Picking up a new skill</li>
<li>Picking up a new skill</li>
</ul>
Play here
.btn.btn-decor {
min-width: 12.375rem;
color: #fff;
padding: .625rem;
background: #000;
border: none;
outline: none;
}
.btn {
-webkit-transition: color .3s linear,border-color .3s linear,background .3s linear;
transition: color .3s linear,border-color .3s linear,background .3s linear;
min-width: 11.1875rem;
font-family: sans-serif;
font-size: .6875rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
white-space: normal;
padding: 1.25rem .9375rem;
position: relative;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: .730rem;
line-height: 1.5;
border-radius: 0;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn.btn-decor span {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
display: block;
padding: 1.25rem .9375rem;
border-top: 2px solid #272726;
border-bottom: 2px solid #272726;
position: relative;
}
.btn.btn-decor span:before {
bottom: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.375rem;
border-width: 0 2px;
border-style: solid;
border-color: #272726;
color: #272726;
}
.btn.btn-decor .icon-star:first-child {
left: -.25rem;
}
.btn.btn-decor .icon-star {
-webkit-transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,transform .4s linear;
transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
width: .625rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-ms-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
font-size: .625rem;
color: #272726;
}
[class*=" icon-"], [class^=icon-] {
font-family: icomoon!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor .icon-star:nth-child(2) {
right: -.25rem;
}
.btn.btn-decor .icon-star {
-webkit-transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,-webkit-transform .4s linear;
transition: color .4s linear,transform .4s linear;
transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
width: .625rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-ms-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
font-size: .625rem;
color: #272726;
}
[class*=" icon-"], [class^=icon-] {
font-family: icomoon!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor span:after {
top: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
-webkit-transition: border-color .3s linear;
transition: border-color .3s linear;
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.375rem;
border-width: 0 2px;
border-style: solid;
border-color: #272726;
color: #272726;
}
.icon-star:before {
content: url("");
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn.btn-decor.btn-decor-white:hover .icon-star,.btn.btn-decor:hover .icon-star {
-webkit-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
color: #4f4f4d
}
.offer-section .stars-bg .icon-star:first-child {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.btn.btn-decor.btn-decor-white:hover span,.btn.btn-decor:hover span {
border-color: #4f4f4d
}
.btn.btn-decor.btn-decor-white:hover span:after,.btn.btn-decor.btn-decor-white:hover span:before,.btn.btn-decor:hover span:after,.btn.btn-decor:hover span:before {
border-color: #4f4f4d
}
<div>
<a -label="Link more" href="#" gv-link="link_3" class="btn btn-decor js-check-text sticky-link">
<span><i class="icon-star"></i>submit<i class="icon-star"></i></span>
</a>
</div>
enter image description here
When adding my button classes to the shortcode, it picks them up, but not correctly. Maybe because I have two classes "btn btn-decor" and "icon-star". What other options can there be, well, besides creating your own form, so that the button works in the created Contact Form 7?
Trying to create a slide right transition on a button. If I remove the .container background color the transition works. But I want the button to start black and change to yellow while keeping the container color as default. But the output seems different. It will only transition to yellow if the button background is transparent. Any help is appreciated, been racking my brain way too long on this.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
I adjust the code a bit and now the container is working well even with black background set. Its now animating from black to yellow. Additionally, I have also removed yellow border to create slick animation look.
Here is the working snippet.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
z-index: 1;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
background-color: black;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
As you've written it, your ::before pseudo-element is below the .container element, because both the .container and the anchor (a) are on the same z-index.
To place it in-between the anchor and the container, you need to make your anchor being above the container on the z-axis, i.e, set its z-index.
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
/* place it at a higher z-index than its parent ... */
z-index: 1;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
/* ... to make this be in-between .container and the a */
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
<div class="container">
<p>Register</p>
</div>
I have this code: https://jsfiddle.net/e0u4sow1/6/
It works, I added a arrow beneath the text when you hover over the image. I want that arrow to slide in from the left to the center with a slow end and when you move your mouse away to slide right with a slow start. I spend 2 hours now trying many things to get this to work, but I give up. Can someone help me with this? also maybe a small explanation as to what part in the code makes the arrow slide in and out? I removed all code with arroweffect relations, so it's just the original effect with the arrow added
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: rotate(135deg);
}
<h1>MR Cube</h1>
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
As you didn't post your try to make the animation, it's hard to explain what you did wrong.
I made the animation in the following example adding translate on the arrow and removing it on hover. The transition decalration makes the animation between both states.
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image {
display: block;
}
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover {
opacity: 1;
}
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 {
margin-top: 0;
}
.media__body p {
margin-bottom: 1.5em;
}
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #FFF inset;
transform: translateX(250px) rotate(135deg);
transition: transform .8s ease-in;
}
.media__body:hover .arr {
transform: translateX(0) rotate(135deg);
transition-timing-function: ease-out;
}
<div class="media">
<a href="http://www.google.nl/">
<img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
<div class="media__body">
<h1>Lees meer</h1>
<div class="arr"></div>
</div>
</a>
Note that you will need to add the vendor prefixes to the transition and transform properties for browser support (see canIuse for 2D transform and transitions)
I would also suggest you read up on MDN about transforms and transitions.
How to create a reveal icon inside button on hover in TB3. I tried to mimic this behavior using CSS transitions and position property. But I essentially need is to have a separate background color for icon and button. Here is what I am doing right now.
HTML Markup
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
Download
</button>
CSS Code
.btn.icon-revealed > span {
left: -30px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2em,0);
-moz-transform: translate(2em,0);
-o-transform: translate(2em,0);
-ms-transform: translate(2em,0);
}
What I want to Achieve
Notice the background color of icon and button changed on hover state. I could not able to do that. How can I achieve this in TB3?
Here's an alternative way that smooths out the transition.
.btn-dark {
border: none;
font-family: inherit;
font-size: inherit;
color: #fff;
background: none;
padding: 15px 30px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-dark:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-icon {
background: #4E7878;
color: #fff;
line-height: 20px;
font-size: 14px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-icon span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-icon:before {
background: #4A6B6B;
position: absolute;
height: 100%;
width: 30%;
line-height: 2.5;
font-size: 150%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-download:hover span {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
color: #fff;
}
.btn-download:before {
left: -100%;
top: 0;
}
.btn-download:hover:before {
left: 0%;
}
.icon-reveal:before {
content: "\e197";
font-family: 'Glyphicons Halflings';
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<button class="btn-dark btn-icon btn-download icon-reveal"><span> Download</span>
</button>
</div>
You can create that effect using multiple backgrounds with linear-gradient. Code explanantion in comments
.btn.icon-revealed {
margin: 10px; /* Added for SO snippet, not required */
width: 115px; /* Added fixed width for avoiding jump */
}
.btn.icon-revealed > span {
left: -40px;
width: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.btn.icon-revealed:hover > span {
width: 20%;
-webkit-transform: translate(2.5em, 0);
-moz-transform: translate(2.5em, 0);
-o-transform: translate(2.5em, 0);
-ms-transform: translate(2.5em, 0);
}
/* Added code */
.btn.icon-revealed {
background: #53777A;
color: #fff;
}
.btn.icon-revealed:hover {
background: linear-gradient(to right, #4B6B6E 0%, #4B6B6E 30%, #53777A 30%);
/* Start color---^, End at 30%-^, ^-- Start second color */
color: #fff;
}
.btn.icon-revealed:hover .text {
padding-left: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-dark icon-revealed">
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="text">Download</span>
</button>