I have a link ("a" tag) in my css document, and I have an animation that scales a bottom border out from the center to both ends of the link. I want the animation to scale from the left side and stretch to the right
I have tried using a negative to positive translation on it, but that wasn't looking like I want it to. I can't seem to find any good articles on here, or any other website.
a:link:after
{
content: "";
display: block;
border-bottom: 2px solid white;
transform: scaleX(0);
transition: transform .2s ease-out;
}
a:hover:after
{
transform: scaleX(1);
}
The negative to positive translation doesn't hide the part of the border that hasn't been animated in yet, so there is just a random border to the left of the link.
You can use the translate property in combination with scale.
a {
font-size: 24px;
text-decoration: none;
position: relative;
color: black;
overflow: hidden;
display: inline-block;
}
a:after {
content: "";
background: black;
height: 2px;
transform: translate3d(-100%, 0, 0) scale(0);
transition: transform .2s ease-out;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
a:hover:after {
transform: translate3d(0, 0, 0) scale(1);
}
LINK
Related
So i made a simple button with a perspective pseudo element that flips on hover.
This works perfectly well on android and pc, but on iphone/ipad the text is only visible in the upper half.
Also tried adding a span for the text and position it above the stack, same result.
Does anyone know how to fix this?
Couldn't find a similar question on stack so far, but should be fixable i reckon.......
PS: i use scss, so it converts including -webkit and other variants..
This is how it looks on appetize.io (and real iphone):
.btn {
position: relative;
display: inline-block;
cursor: pointer;
padding: 12px 20px;
margin: 10px 10px;
text-decoration: none;
-webkit-perspective: 500px;
perspective: 500px;
color: #fff;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
z-index: 10;
line-height: 20px;
overflow: visible;
}
.btn:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
border-radius: 12px;
left: 0;
-webkit-perspective: 500px;
perspective: 500px;
-webkit-transform: translateY(-50%) rotateX(45deg);
transform: translateY(-50%) rotateX(45deg);
min-height: 20px;
top: 50%;
z-index: -10;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out
}
.btn:hover:after {
color: #fff;
-webkit-transform: translateY(-50%) rotateX(-135deg);
transform: translateY(-50%) rotateX(-135deg);
background-color: #000
}
<div class="btn">this is unreadable on ios?</div>
I used the css "trick" to underline a div which consists in adding a pseudo-elment div::after with empty content and set borders :
.is-hightlighted:after {
content: "";
height: 0;
width: 100%;
border: solid 1px black;
position: absolute;
bottom: 0;
left: 0;
animation: hightlightning_in 0.6s ease-out;
transform-origin: left;
}
#keyframes hightlightning_in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
I obtain the desired result in Mozilla :
enter image description here
but not in Chrome neither Opera :
enter image description here
where some white sapce appears inside the div as if it had an height.
Is there a way to get the same result as Mozilla's ?
Use height and background instead of border to make it look like a line on all the browsers. So your css should look like this:
.is-hightlighted:after {
content: "";
width: 100%;
height: 1px;
background: black;
position: absolute;
bottom: 0;
left: 0;
animation: hightlightning_in 0.6s ease-out;
transform-origin: left;
}
#keyframes hightlightning_in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
How could I animate the link underline with using border-bottom, so that there is space between the text and the underline?
I know how to do it in the following way, so that the default text-decoration element is animated. But I would like to have space between the link and the underline, that is why I think I need to use border-bottom. But I can't get the border-bottom work with the transition animation. How could I do this? I tried looking for other solutions, but couldn't find any. Thanks!
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
you can fake an animated border via background and background-size:
a {
padding-bottom: 5px;
/* set here size + gap size from text */
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat;
background-size: 0px 3px;
transition: 0.5s;
text-decoration: none;
}
a:hover {
background-size: 100% 3px;
}
a[class] {
color: gray;
}
a.tst {
color: purple;
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat;
background-size: 0px 2px;
}
a.tst:hover {
background-size: 100% 2px;
}
<a href>kake animated border</a>
<a href class> why currentcolor ?</a>
<a href class="tst">mix of colors ?</a>
The code you've presented uses a pseudo-element not the default text-decoration. Since the pseudo element is positioned absolutely, you can change the distance easily. Change the a:before bottom to -5px or whatever negative value fits the distance that you want:
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Long long text
I have a simple button, that I want to scale up by 10% when the user hovers on it.
I tried to achieve that by using css3 "transform: scale(1.1);" together with "transition: all .3s ease-in-out;".
It scales the button up, but also causes the text to flicker in the process. I tested it in Chrome, FF and IE - all had the same issue.
CSS:
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/1/
I tried to find a solution and finally managed to fix it in Chrome by adding "backface-visibility: hidden;" to the button. The text is now bit blurrier but thats alright. Unfortunately for FF and IE this doesn't work and text inside the button is still flickering when it scales up.
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
backface-visibility: hidden;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/2/
I spent half a day yesterday googling around and trying to fix it. Unfortunately so far I haven't been successful.
Has anyone encountered such a problem and what is the best way to fix it?
Not perfect, but somehow better, is to move the element in the z plane, and get the zoom effect as a result of the perspective
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all 1s ease-in-out;
transform: perspective(1000px) translateZ(0px);
}
a:hover {
transform: perspective(1000px) translateZ(300px);
}
BUTTON
So I have these hexagonal tiles that I would like to scale up on hover. The hexagon is done with multiple DIVS and CSS3 transforms. I'd like to have is transition in the scale, but the transformed parts lose their transform during the transition and re-appear after it finishes. Any suggestions?
Here's a fiddle: http://jsfiddle.net/A2mTU/1/
Here's what it should look like (NOTE: I know they use the canvas element, I need to use regular CSS for this): http://www.upperfirst.com
Thanks!
I would recommend using this technique for creating the hexagons so that you don't get the issues you are currently experiencing when scaling them: http://jsfiddle.net/joshnh/jZMEy/
div {
background: black;
height: 60px;
position: relative;
width: 120px;
-webkit-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
-o-transition: .25s;
transition: .25s;
}
div:after {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 35px solid black;
bottom: -35px;
height: 0;
content: '';
left: 0;
position: absolute;
width: 0;
}
div:before {
border-bottom: 35px solid black;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
content: '';
left: 0;
position: absolute;
top: -35px;
width: 0;
}
div:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
The way you form the hexagonal tiles is not good for applying animations with absolute positioned elements. I would recommend this way: http://jsfiddle.net/linmic/5aqSK/
Cheers