I have a CSS spinner that works everywhere except on iOS Chrome. In iOS Chrome the animation is very jerky and is breaking the intended smooth sequence. Here is the code I have at the moment:
HTML
<div class="spinner">
<span class="child1"></span>
<span class="child2"></span>
<span class="child3"></span>
<span class="child4"></span>
<span class="child5"></span>
<span class="child6"></span>
<span class="child7"></span>
<span class="child8"></span>
</div>
CSS
#keyframes loader {
0% {
background-color: #ffffff;
}
100% {
background-color: transparent;
}
}
.spinner {
border-radius: 100px;
height: 100px;
position: relative;
transform: scale(0.6);
width: 100px;
}
.spinner span {
animation-direction: normal;
animation-duration: 1.04s;
animation-iteration-count: infinite;
animation-name: loader;
background: transparent none repeat scroll 0 0;
border-radius: 50px;
display: inline-block;
height: 16px;
position: absolute;
width: 16px;
}
.spinner span.child1 {
animation-delay: 0.39s;
left: 50%;
margin-left: -8px;
top: 0;
}
.spinner span.child2 {
animation-delay: 0.52s;
left: 71px;
top: 13px;
}
.spinner span.child3 {
animation-delay: 0.65s;
margin-top: -8px;
right: 0;
top: 50%;
}
.spinner span.child4 {
animation-delay: 0.78s;
left: 71px;
top: 72px;
}
.spinner span.child5 {
animation-delay: 0.91s;
bottom: 0;
left: 50%;
margin-left: -8px;
}
.spinner span.child6 {
animation-delay: 1.04s;
left: 13px;
top: 72px;
}
.spinner span.child7 {
animation-delay: 1.17s;
left: 0;
margin-top: -8px;
top: 50%;
}
.spinner span.child8 {
animation-delay: 1.3s;
left: 13px;
top: 13px;
}
I have all the CSS prefixes as well -webkit-, -o-, -ms-...
If anyone can shed some light on where it is I'm going wrong, that'd be great.
http://codepen.io/anon/pen/qdmYaQ
Thanks in advance.
I figured it out! I had 2 animations on the page going off at the same time which was causing a lag. Also see: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/
Related
Whenever I hover on the first image, it moves to a different location. That is supposed to happen. But it comes back to it's original spot after un-hover. I need it to stay in the end location. If you understood that, can you help? Thanks in advance.`
I tried to have the code animation infinite, but that doesn't seem to work.
<html style="overflow: hidden;">
<meta name="viewport" content="width=device-width">
<head>
<script>
window.start();
function start(){
alert("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.");
console.log("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.")
}
</script>
<style>
#keyframes slide{
0%{
width: 50px;
}
100%{
width: 300px;
}
}
#keyframes fly{
0%{
top: 25;
left: 17;
width: 20;
}
100%{
top: 157;
left: 30;
}
}
#keyframes fade{
from{opacity: 0;}
to{opacity: 1;}
}
#keyframes fade2{
from{opacity: 0;}
to{opacity: 1;}
}
#keyframes goaway{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.nav:hover{
animation: slide 2s forwards;
}
.nav:hover > center > #home{
animation: fade2 2s forwards;
}
.nav:hover > center > #about{
animation: fade 2s forwards;
}
.nav:hover > #rocket{
animation: fly 2s forwards;
}
.nav:hover > #title{
animation: fade 7s forwards;
}
.nav:hover > center > #shop{
animation: fade 3s forwards;
}
.nav:hover > #menu_mark{
animation: goaway 1s forwards;
}
#image1:hover{
animation: move1 0.5s infinite;
}
#keyframes move1{
0%{
width: 160px;
top: 70px;
left: 200px;
}
50%{
width: 180px;
top: 50px;
left: 400px;
}
100%{
width: 200px;
top: 30px;
left: 600px;
}
}
#image1:hover ~ #image2{
animation: move2 0.5s infinite;
}
#keyframes move2{
0%{
left: 400px;
width: 180px;
top: 50px;
}
50%{
left: 600px;
width: 200px;
top: 30px;
}
100%{
width: 180px;
top: 50px;
left: 820px;
}
}
#image1: ~ #image3{
}
#image1:hover ~ #image4{
}
#image1:hover ~ #image5{
}
</style>
<script>
</script>
</head>
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<body style=" align-content: center; margin: 0; padding: 0; background-color: #404040; overflow-y: hidden;">
<div class="elements">
<img src="Image%201.png" id="image1" style="width: 160px; position: absolute; top: 70px; left: 220px; border-radius: 10px;">
<img src="Image%202.png" id="image2" style="width: 180px; position: absolute; top: 50px; left: 400px; border-radius: 10px;">
<img src="Image%203.png" id="image3" style="width: 200px; position: absolute; top: 30px; left: 600px; border-radius: 10px;">
<img src="Image%204.png" id="image4" style="width: 180px; position: absolute; top: 50px; left: 820px; border-radius: 10px;">
<img src="Image%205.png" id="image5" style="width: 160px; position: absolute; top: 70px; left: 1015px; border-radius: 10px;">
</div>
<div class="nav" style="background-color: #282829; height: 800px; width: 50px; box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.4); margin-bottom: 10px; position: sticky; float: left;" >
<span id="title" style="display: inline-block; font-family: Thasadith; color: white; font-size: 40px; position: absolute; top: 150; left: 60px; opacity: 0;">MONOSPACE</span>
<center><span id="home" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; padding-top: 250px; opacity: 0;">HOME</span><br>
<span id="about" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">ABOUT</span><br>
<span id="shop" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">SHOP</span><br></center>
<img id="menu_mark" src="LogoMakr_6Pr2go.png" style="width: 25px; position: absolute; top: 300px; left: 12.5px;">
<img id="rocket" src="LogoMakr_9Pl0y8.png" style="color: white; position: absolute; top: 25; left: 17; width: 20;">
</div>
</body>
</html>
You need two things. Firstly use forwards in the animation rather than infinite which is going to infinitely loop your animation. Secondly you need to maintain state. As soon as you mouse away that end state of the animation is lost and will repeat on re-hover. To avoid this use javascript to add a class on hover, this will handle the state for you.
const image = document.getElementById("image1");
const onHover = (e) => {
event.target.classList.add("hovered");
console.log('image hovered');
event.target.removeEventListener("mouseenter", onHover)
};
image.addEventListener("mouseenter", onHover)
#image1 {
width: 100px;
height: 100px;
background: blue
}
#image1.hovered {
animation: move1 0.5s forwards;
}
#keyframes move1{
0%{
width: 160px;
top: 70px;
left: 200px;
}
50%{
width: 180px;
top: 50px;
left: 400px;
}
100%{
width: 200px;
top: 30px;
left: 600px;
}
}
<div id="image1">
</div>
Try adding a timing for your animation:
.nav:hover > center > #home{ animation: fade2 2s ease-in-out forwards; }
I never use to/from, I always use 0%/100% you can do more things in that way.
Tell me if it works because I use my keyframes like this.
I am trying to stagger the opacity (fade) of three boxes via an infinite keyframe animation and the animation-delay property.
I am getting some unexpected behavior, as the third box fades away, it suddenly reappears faintly ("flickers") before the animation starts again. I am experiencing this across browsers.
I would like to use pseudo elements if possible, is there a known fix for this keyframe bug?
HTML
<div class="container">
<div class="child">
<div></div>
</div>
</div>
SCSS
.container {
position: fixed;
left: 150px;
top: 50px;
.child {
position: absolute;
animation:mymove 1s infinite;
&::before{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: inherit;
animation-delay: .15s;
}
div {
width: 25px;
height: 25px;
background-color: red;
animation: inherit;
animation-delay: .30s;
}
&::after{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: inherit;
animation-delay: .45s;
}
}
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
JS Fiddle
The reason they flicker is because you have set an animation on their parent, the child.
And since its animation doesn't have a delay, it starts before its children, but will then be overridden by them as soon as their delay has passed, hence one can see a quick flash.
The best way to avoid any future issue with this, is to remove the animation from the child
.container {
position: fixed;
left: 150px;
top: 50px;
}
.container .child {
position: absolute;
}
.container .child::before {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: mymove 1s infinite;
animation-delay: 0.15s;
}
.container .child div {
width: 25px;
height: 25px;
background-color: red;
animation: mymove 1s infinite;
animation-delay: 0.3s;
}
.container .child::after {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: mymove 1s infinite;
animation-delay: 0.45s;
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="container">
<div class="child">
<div></div>
</div>
</div>
So I'm trying to somehow do two animations on one element but I can't be able to fix it.
Here is a jsfiddle which includes only the important things. For the full picture, check here. I want to make the alien which represents the letter L coming in from the right to left (= the position where he is now at).
So what I want to get is that the alien moves from right to left, but together with the moving legs, and the image of the alien.
I will explain some of the code.
HTML:
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
.monster_L represents the image of the alien
.Benen_L represents the legs (=benen)
CSS
/*Monster L*/
.monster_L img {
position: absolute;
bottom: 296px;
left: 596px;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
bottom: 293px;
left: 597px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
bottom: 286px;
left: 605px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 613px;
}
/*Been4*/
.B_4 {
left: 621px;
}
#keyframes animation_B_1 {
0%{ bottom: 293px; }
50% { bottom: 286px; }
100%{ bottom: 293px; }
}
#keyframes animation_B_2 {
0%{ bottom: 286px; }
50% { bottom: 293px; }
100%{ bottom: 286px; }
}
You have to apply position: absolute to letter_L and apply a keyframe to it for its translation with the right property.
However when you apply position: absolute or position: relative to letter_L, all position: absolute elements inside are not going to be relative to letter_L. So you have change the top, bottom, left coordinates accordingly.
I have tried to solve this for you.
Check updated fiddle.
Refer code:
.letter_L {
width: 100px;
position: absolute;
/* z-index: 100000000; */
height: 90px;
animation-name: moveRTL;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Monster L*/
.monster_L img {
position: absolute;
top: 0;
left: 0;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
top: 32px;
left: 0;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
top: 32px;
left: 8px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 16px;
}
/*Been4*/
.B_4 {
left: 24px;
}
#keyframes animation_B_1 {
0% {
top: 28px;
}
50% {
top: 32px;
}
100% {
top: 28px;
}
}
#keyframes animation_B_2 {
0% {
top: 32px;
}
50% {
top: 28px;
}
100% {
top: 32px;
}
}
#keyframes moveRTL {
0% {
right: 0;
}
100% {
right: 200px;
}
}
<!-- L letter -->
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
This is my code:
html
<div id="back">
<div id="right_text">TEST</div>
<div id="left_text">TEST2</div>
</div>
<div id="mid"></div>
css
#mid {
border: 1px solid black;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin:auto;
margin-top:-125px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#back {
width:auto;
height: 150px;
border: 1px solid red;
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
position: static;
}
#-webkit-keyframes rotateY {
from {
-webkit-transform: rotateY(0deg)
}
to {
-webkit-transform: rotateY(360deg)
}
}
#right_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: right;
margin-top: 35px;
text-align: center;
}
#left_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: left;
margin-top: 35px;
text-align: center;
}
http://jsfiddle.net/bXhL8/
As you can see, both text-divs face their back to the screen when they are not on their side of origin. i want both of them to always stay the same and just "hang on" to the rotation of my back-div.
my question would be if that is possible in css alone or if id need js for it.
Add the following to your css
#left_text, #right_text {
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Update
Updated JSFiddle
here is my new bit of code. its not a perfect circle yet, because i just added 4 frames to my #keyframes. im thinking about making a actual circular rotation and adding a skew() element to the whole circular function / to my whole body, don't know if that will work though.
thanks for your help!
html:
<div id="right_text">
<div id="right_text_text">TEST</div>
</div>
<div id="left_text">
<div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>
css:
#mid {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin-top: 105px;
margin-left: 210px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#right_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: downupright linear 8s infinite;
}
#left_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: updownleft linear 8s infinite;
}
#-webkit-keyframes downupright {
0% { left: 490px; top: 150px;}
25% { left: 245px; top: 100px; z-index: -10;}
50% { left: 0px; top: 150px;}
75% { left: 245px; top: 200px; z-index:10;}
100% { left: 490px; top: 150px;}
}
#-webkit-keyframes updownleft {
0% { left: 0px; top: 150px;}
25% { left: 245px; top: 200px; z-index: 9;}
50% { left: 490px; top: 150px;}
75% { left: 245px; top: 100px; z-index: -9;}
100% { left: 0px; top: 150px;}
}
http://jsfiddle.net/bXhL8/4/
So I'm using a CSS3 animation on a WP theme I'm trying to build as a student project, half an hour ago it was working fine. I added in the 3 text / images boxes at the bottom, checked back and now it has stopped working!
I've been trying to amend this for ages now and I'm too scared to go any further in case I break more stuff!
The webpage is http://jacobstone.co.uk/leggera2/
JS Fiddle here - http://jsfiddle.net/2hjz8/
So my html is
<div class="hero-unit">
<div id="logo-title">Leggera</div>
<div id="tagline">Responsive</div>
<div class="Iam">
<p>This is</p>
<b>
<div class="innerIam">
leggera
a theme in progress<br />
built on bootstrap<br />
how I learn stuff<br />
how we do it
</div>
</b>
</div>
& The CSS is:
/* fancy scroll title */
div .Iam {
position: relative;
width: 625px;
padding-left: 1%;
padding-top: 1%;
right: 45px;
top: -80px;
}
.Iam {
padding: 2em 5em;
font: normal 40px/50px Montserrat, sans-serif;
color: #999;
text-shadow: 2px 2px 1px rgba(38, 38, 38, 1);
}
.Iam p {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
}
.Iam .innerIam {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
}
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
#keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
#-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
#-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
#-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
#keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
Thanks in advance for your time!
It looks like the closing bracket (}) after left: 0; in .Iam .innerIam is the problem.
If you remove it the animation is working again.
Updated JSFiddle
You didn't include your animation in the correponding class.
.Iam .innerIam {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
Working Fiddle