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
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 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
I am trying to create a spinning loading circle. I want the red color to be shortened at the end of the spinning as it is right now:
https://jsfiddle.net/mz41spv4/1/
I use another spinner with white border color to achieve this effect, but I can see there's tiny red color on the border when the white border is covering on top of it. How can I remove this tiny red color on the border?
#keyframes top-cricle {
from {
transform: rotate(-25deg);
}
to {
transform: rotate(335deg);
}
}
#keyframes bottom-cricle {
from {
transform: rotate(-15deg);
}
to {
transform: rotate(345deg);
}
}
html {
background-color: white;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 30px;
.spinner {
padding-right: 35px;
& > span {
display: inline-block;
position: absolute;
border-radius: 100px;
padding: 8px;
border: 5px solid transparent;
&.top {
border-top: 5px solid white;
animation: top-cricle 1s ease-in-out infinite;
animation-delay: 0.2s;
}
&.bottom {
border-top: 5px solid #c23531;
animation: bottom-cricle 1s ease-in-out infinite;
}
}
}
}
Elaborating on what I said in my comment, I'm not sure if it's possible to do, especially considering the objects are so small (there isn't much room for adjustment).
Instead what you could do is create a series of smaller segments that stack up on one another and share the same color.
Here's the rough fiddle I made based on your code
https://jsfiddle.net/mz41spv4/2/ with the changes as follows
.spinner {
padding-right: 35px;
& > span {
display: inline-block;
position: absolute;
border-radius: 100px;
padding: 8px;
border: 5px solid transparent;
animation: top-cricle 1s ease-in-out infinite;
border-top: 5px solid #c23531;
&:nth-child(1) {
animation-delay: -0.15s;
}
}
}
You may want to adjust sizes some more, but the core concept is there, and hopefully you can adjust it to fit what you need.
Credit goes to https://loading.io/css/ for the solution. You can use those open source icons as well
I simply increased the animation-delay of the white border-top to 0.5s, and the problem was solved. It seems the delay was a bit off-key (if I am allowed to use this expression in this context)
&.top {
border-top: 5px solid white;
animation: top-cricle 1s ease-in-out infinite;
animation-delay: 0.5s;
}
https://jsfiddle.net/mz41spv4/4/
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'm trying to create the following effect with on a design: http://i.imgur.com/RIaSA3N.png
I can create a bordered circle fine - but the matter of partially completing the circle is proving difficult. There are a myriad of different ways to do this with Javascript and Canvas, but I can't find a solid way to achieve it in CSS. I don't mind having a number of different classes for different values, but is there an elegant solution available?
Updated: this is very possible using pure CSS3.
(You should be able to open the below demo and customize to your result)
Use #keyframes to animate between the numbers. You'll need to add this.
Below is using #keyframes 'rotate' { for the circular motion.
body { background: #222; }
.circle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #333;
border-radius: 50%;
}
.inner-circle {
width: 92%;
height: 92%;
background: #222;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 50px solid rgba(255,255,255,0.3);
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
-webkit-animation: rotate 1.6s infinite;
animation: rotate 1.6s infinite;
}
#-webkit-keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="circle">
<div class="spinner"></div>
<div class="inner-circle"></div>
</div>