Good day. The animation was done on a clean CSS (I understand that i can use the "request animation frame", but I can’t use it). Faced such a problem that the animation works well only in the desktop browser. "Animation-delay" does not work on mobile devices. How can I implement this animation on a clean CSS?
SCSS:
.initial-loader {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background: #65B200;
&_disabled {
display: none;
}
&__wrapper {
height: 0%;
width: auto;
display: flex;
justify-content: center;
}
&__loader {
width: 60px;
height: 8px;
align-self: flex-end;
display: flex;
justify-content: space-around;
}
&__loader span {
height: 8px;
width: 8px;
background-color: white;
border-radius: 100%;
}
&__loader :nth-child(1) {
animation: anime 0.5s infinite ease-in-out alternate;
}
&__loader :nth-child(2) {
animation: anime 0.5s infinite ease-in-out alternate;
-moz-animation-delay: 120ms;
-webkit-animation-delay: 120ms;
-o-animation-delay: 120ms;
animation-delay: 120ms;
}
&__loader :nth-child(3) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 240ms;
}
&__loader :nth-child(4) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 360ms;
}
&__loader :nth-child(5) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 480ms;
}
#keyframes anime {
from {
transform: scale(1)
}
to {
transform: scale(0.2)
}
}
HTML:
<div class="initial-loader">
<div class="initial-loader__wrapper">
<div class="initial-loader__loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
Here my code:
https://codepen.io/koofem/pen/MWYoYxE
How does it works in the desktop browser
How does it works on mobile
Mobile devices has webkit browsers, if the same CSS is working on desktops and not on Mobile Devices, then make sure your css has prefixes for all different browsers and devices.
You have had done it for :nth-child(2) but not for all other selected elements and classes.
Best shortcut is to goto CSS Autiprefixer and give it a shot by copy pasting your CSS and try to test on mobile device again (Obviously after clearing cache of the Mobile Device's Browser)
Related
i have a slider made in owl carousel in which i have added an extra image and done some css for its animation, the live url of the website is live website
i have done the following css to make the image move according to the other images in slider:
#-webkit-keyframes test {
0% {
background-image: url('assets/slider1.2.png');
}
25% {
background-image: url('assets/slider2.2.png');
}
75% {
background-image: url('assets/slider3.2.png');
}
100% {
background-image: url('assets/slider4.2.png');
}
}
#bg1 {
float: left;
left: 0;
background-image: url('assets/slider1.2.png');
transition: 6s ease-in-out;
-webkit-animation-name: test;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: 3000;
-webkit-animation-delay: 6s;
-webkit-animation-direction: initial;
-webkit-animation-timing-function: steps(1, end);
}
#bg1.bgactive {
background-image: url('assets/slider4.2.png');
}
.animate-left {
transform: translateX(-100%);
height: 90%;
border-radius: 30px;
padding: 45px 40px;
width: 50%;
position: absolute;
top: 0;
left: 0;
background-position: 25% 75%;
display: flex;
align-items: center;
opacity: 0;
transition: 1s ease-in-out;
}
.animate-left.active {
opacity: 1;
transform: translateX(0%);
}
<div class="animate-left active">
<div class="bg-shape" id="bg1">
</div>
</div>
as you can see in the website, in the first two slides all images are coming fine, in th third and forth slides the image which i did css is blinking, not coming properly. can anyone please tell me what did i do wrong in here, thanks in advance
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);
}
}
Been trying to trigger a transition using :hover in a running animation using CSS, in the example below, only the background-color changes on :hover but the transform property is triggered only after an animation stops. How can I trigger the transform: rotate during the animation?
Also, my initial background-color: red seems to fade-in when I reload the page without me explicitly triggering it by :hover. I assume it's caused by the transition-duration, can this be avoided using only CSS?
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
transform: rotate(180deg);
background-color: teal;
}
#keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="container">
<div class="red"></div>
</div>
</body>
Transforms do not stack in this way. One way to work around this limitation could be to use a parent element for the rotation transform.
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
background-color: teal;
}
.wrap {
transition: all 5s;
}
.wrap:hover {
transform: rotate(180deg);
}
#keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="container">
<div class="wrap">
<div class="red"></div>
</div>
</div>
</body>
My problem is the github and linkedin icons overlay each other and leave the frame when I resize the browser.
If you could make the icons and h1 text grouped so they stay a certain distance from each other it would be great and stay in the same position and size relative to browser size.
Here is the JSFiddle link:
https://jsfiddle.net/vc7up2o4/5/
the main code
h1 {
top: 0;
vertical-align: middle;
position: absolute;
margin-left: 40%;
}
#keyframes mymove {
0% { opacity:0%;}
50% {top: 20%; opacity: 1%;}
/* this is what positions the icons ^ */
100% { top: 10%; opacity:100%;}
}
.github {
position: fixed;
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 2s ;
animation-fill-mode: forwards;
animation-delay: 6s;
opacity: 0;
width: 9%;
margin-left: 43%;
}
.linkedin {
position: fixed;
margin-left: 38vw;
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 2s;
animation-fill-mode: forwards;
animation-delay: 6s;
opacity: 0;
width: 9%;
}
This is the shortest code I could do.
An easy way to achieve what you want is to use flex positionnement: see https://developer.mozilla.org/fr/docs/Web/CSS/flex
.social {
display: flex;
flex-direction: row;
animation: moveUp 2s;
animation-fill-mode: forwards;
animation-delay: 1s;
opacity: 0;
}
.social-link {
display: flex;
justify-content: center;
align-items: center;
max-width: 60px;
padding: 10px;
}
Here is a complete JS fiddle:
https://jsfiddle.net/cyemjxur/3/
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; }