I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
Related
CSS ::after if visible at the start then disappearing in the middle and reappearing at the end why? I want it to be visible throughout the animation equally like a horizontal slider
Here is my code:
.btn {
all: inherit;
position: relative;
font-size: 6rem;
}
.btn::after {
overflow: visible !important;
content: "";
position: absolute;
top: 0;
left: -5%;
height: 100%;
width: 2%;
background-color: greenyellow;
animation-name: LeftToRight;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes LeftToRight {
0% {
left: -5%;
}
100% {
left: 105%;
}
}
<button class="btn">UNIVERSE</button>
This loading spinner I have created doesn't show the delay function at the moment I hover on the element, but it rotates a full turn before creating the animation on the second turn; how could I debug this issue?
Kindly, check my codepen code link so you can get what I mean, thank you.
Codepen
Each border of spin pseudo elements must move at different timing from the beginning when I hover on the element, I have set the animation delay function, and it works properly but not at the first turn.
This is how I wrote the code:
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
Commenting out the initial animation-delay: 1s causes the spinners to start immediately out of sync, which I believe is the behavior you are seeking.
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
/*animation-delay: 1s;*/
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
As for how to debug it-- there is an "animations drawer" in the Chrome dev tools: you can learn more about the Chrome dev tools animations drawer in this blog post.
Problem is that your first animation spins all 3 of the elements. Your pseudo elements start spinning only after their delay is over. If you want to offset animations from the very beginning you have 2 options.
use negative animation-delay, so for example animation-duration: -2s;
use separate not nested elements for each spinning element.
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
display: none;
}
}
Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.
You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use opacity, height
.title2 {
width: 100px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 31%;
animation: 1s fadeOutOpacity ease-out;
opacity: 0
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="title2"/>
Project Description: I am in quest to apply two animations to a nested images inside a div that actually The Div has the responsibility to move the image up and down because the image is captivated inside it And the image(img) which is nested inside the div, Has the responsibility to rotate successively while the div is bouncing the image up and down.
What I want:
1.the image inside the div should keep rotating 360 degrees
2.While the 1 is happening, The div should keep bouncing or moving up and down
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: forwards;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
The problem: the bouncing process is awesome, but I dont know how to make the image rotating while it is bouncing.
Thanks.
Codepen Link
THE POST IS EDITED AND HAS NO PROBLEM AFTER APPLYING THE ANSWER
animation-iteration-count should be infinite on img rotation, to match the number of times it bounces as well, else the animation will run once and stop while the box is still bouncing. Also you have a typo, the semicolon in to {transform: rotate(360deg;)} should be outside to {transform: rotate(360deg);}. This is why it doesnt work.
Furthermore animation-direction:forwards is invalid, the correct value is animation-direction:normal.
With these corrections the code is:
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: normal;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
I was just trying to create a simple border animation in CSS-3 , but somehow it seems to fail and not work FIDDLE HERE
CODE:
a {
display: inline-block;
margin-top: 4em;
padding: 2em 5em;
background: #eee;
color: #000;
position: relative;
/*width: 120%;*/
}
a:before {
content:'';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 5px;
display: block;
background: #c107b4;
}
a:hover:before {
-webkit-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-name: borderanim;
-o-animation-name: borderanim;
animation-name: borderanim;
}
#-moz-keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
#keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
Well if instead of using a custom animation, if i do the following :
a:hover:before {
width: 100%;
left: 0;
right: 0;
-webkit-transition: width 5s;
-o-transition: width 5s;
transition: width 5s;
}
The border animation works(no keyframes used here though.), it works , but there is glinch. I'd prefer a keyframe animation. Can anybody tell me what am i doing wrong ?
Thank you.
Alex-z.
Must assign animation duration to see the change
in your case it animation in 0.0s. Must assign some time to see animation e.g
tag-name
{
animation-name:animate;
animation-duration:2s;
}
#keyframes animate
{
from{background:black;}
to{background:white;}
}
you can use -webkit-animation instead of -webkit-animation-name and give some animation duration.
DEMO
a:hover:before {
-webkit-animation: borderanim 5s;
-o-animation: borderanim 5s;
animation: borderanim 5s; }