I can't seem to find a solution for this problem.
There's a sprite animation that I've put into a div.
Now I want 2 different movements on that containing div.
should bring the div into view
should move the div from left to right in an infinite loop
It works perfectly in FF & IE, but the 2nd animation in the chain does not play in webkit browsers....
The funny thing is that if you open the inspector in Chrome and hover over the divs in the html code, you can actually see the container and the sprite div moving, but the sprite itself doesn't. Weird...
Here's the code http://codepen.io/anon/pen/yyGJGX?editors=110
Thx in advance.
The html
<body>
<section class="center">
<div class="movingBox">
<div class="counter"></div>
</div>
</section>
</body>
The CSS
.center {
width:600px;
height:400px;
position:absolute;
z-index: 0;
left:50%;
top:50%;
margin:-200px 0 0 -325px;
text-align:center;
overflow: hidden;
}
.movingBox {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 50;
-webkit-animation-name: box, box-move;
-webkit-animation-delay: 0s, 4s;
-webkit-animation-duration: 4s, 6s;
-webkit-animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, none;
-webkit-animation-direction: normal, alternate;
animation-name: box, box-move;
animation-delay: 0s, 4s;
animation-duration: 4s, 6s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
animation-direction: normal, alternate;
}
.counter {
position: absolute;
bottom: 0;
left: 150px;
width:160px;
height:160px;
display:block;
background:transparent url(../img/test.png) 0 0 no-repeat;
z-index: 20;
-webkit-animation: teller 4s steps(4) infinite;
animation: teller 4s steps(4) infinite;
}
#-webkit-keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#-webkit-keyframes box {
0% {-webkit-transform: translateX(-600px); }
100% {-webkit-transform: translateX(0px); }
}
#-webkit-keyframes box-move {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
#keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#keyframes box {
0% {transform: translateX(-600px); }
100% {transform: translateX(0px); }
}
#keyframes box-move {
0% {transform: translateX(0px); }
33% {transform: translateX(100px); }
66% {transform: translateX(50px); }
100% {transform: translateX(350px); }
}
CSS Solution
After playing around, I found out, that the issue is if you try combining two keyframe animations with the same CSS properties (-webkit-transform: translateX()) the first one will interfere with the second one.
A working solution is to just animate the left-value in your first keyframe animation and afterwards use -webkit-transform: translateX.
#-webkit-keyframes box {
0% { left: -600px; }
100% { left: 0; }
}
#-webkit-keyframes boxMovePlease {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
Related
I'm pretty new to programming and CSS animations so please excuse me if I'm using the wrong terms :-)
I have two animations on one element. I have an image of a man on a scooter that slides into the homepage (once) when it's loaded and then on hover it bounces (infinite).
Below is my code:
HTML:
<section>
<!--Animation and Welcome Heading-->
<div class="welcome-container">
<img id="scooter-animation" src="./images/Man_On_Scooter.png" alt="Man on Electric Scooter">
<h1>welcome to suoto.</h1>
</div>
</section>
CSS:
/* Animated Scooter Slide-In */
#keyframes slide {
100% {
left: 0%;
}
}
#-webkit-keyframes slide {
100% {
left: 0%;
}
}
/* Animated Scooter Bounce on Hover */
#keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
#scooter-animation {
position: relative;
left: -200%;
-webkit-animation: slide 2s forwards;
-webkit-animation-delay: 0s;
animation: slide 2s forwards;
animation-delay: 0s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#scooter-animation:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
left: 0% !important;
}
Everything is running perfectly except as soon as the mouse hovers anywhere else on the webpage, the animation disappears from screen and slides in again when I only want this to happen once. Does anybody have any idea what it is I'm doing wrong?
Thank you for your answers and have a nice day!
I have changed your code structure a bit and added Javascript but It should work now. Basically I gave initial class name for your image and I cancelled this class name after first render. As a result cancelling initial css feature from image fixed the problem.
window.addEventListener('load', animate);
function animate() {
setTimeout(function(){ document.getElementById('scooter-animation').classList.remove('slide'); }, 3000);
}
/* Animated Scooter Slide-In */
#keyframes slide {
0% {
left: -200%;
}
}
#-webkit-keyframes slide {
100% {
left: 0%;
}
}
/* Animated Scooter Bounce on Hover */
#keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
#scooter-animation {
width:200px;
}
.slide {
position: relative;
-webkit-animation: slide 2s forwards;
-webkit-animation-delay: 0s;
animation: slide 2s 1;
animation-delay: 0s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#scooter-animation:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
left: 0%;
}
<body>
<section>
<!--Animation and Welcome Heading-->
<div class="welcome-container">
<img class='slide' id="scooter-animation" src="https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478" alt="Man on Electric Scooter">
<h1>welcome to suoto.</h1>
</div>
</section>
<body>
I have the following code for an image of a plane to come in from the left hand side of the page, land... ride on straight for 800px then take off again off the opposite side of the page.
But what is getting to me is the jerkiness between each percentage.
is there a away for it to smooth out the transitions between keyframes.
#keyframes plane-right {
0% {
visibility:visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility:visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility:visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility:visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
Add animation duration and animation timing-function to control the length of the animation and the timing (smoothness).
.plane-right-div {
width: 100px;
height: 70px;
background-color: #bada55;
border-radius: 5px;
animation-name: plane-right;
animation-duration: 6s;
animation-timing-function: ease;
}
#keyframes plane-right {
0% {
visibility: visible;
transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
}
40% {
visibility: visible;
transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
}
60% {
visibility: visible;
transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
}
100% {
visibility: visible;
transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
}
}
<div class="plane-right-div"></div>
Add following animation-timing property to your image tag, this will help
transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
I am trying to create an animation of a balloon flying. All is weel in all modern browsers except IE11.
I am using translateX and translateY without any problem but scale is causing the image to become blurry.
#media (min-width: 1100px) {
.balloon-outer,
.balloon-inner,
.balloon {
height: 100%;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
animation-duration: 60s;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
will-change: transform;
pointer-events: none;
}
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
}
.balloon {
transform-origin: 50% 50%;
animation-name: travel-y;
animation-timing-function: ease-out;
transform: translateY(90%);
}
.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
transform-origin: 100% 100%;
animation-name: scale;
animation-timing-function: linear;
transform: scale(3);
}
}
#keyframes scale {
0% {transform: scale(3);}
80% {transform: scale(0);}
100% {transform: scale(0);}
}
#keyframes travel-x {
0% {transform: translateX(-10%);}
80% {transform:translateX(-45%);}
100% {transform:translateX(-45%);}
}
#keyframes travel-y {
0% {transform: translateY(120%);}
80% {transform:translateY(-70%);}
100% {transform:translateY(-70%);}
}
<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>
http://codepen.io/rachelreveley/pen/xdLGEO
I have tried this trick which I have seen in several places but it made no difference.
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
Try changing all your translateX and translateY to translate3d like:
#keyframes travel-x {
0% {transform: translate3d(-10%,0,0);}
80% {transform:translate3d(-45%,0,0);}
100% {transform:translate3d(-45%,0,0);}
}
#keyframes travel-y {
0% {transform: translate3d(0,120%,0);}
80% {transform:translate3d(0,-70%,0);}
100% {transform:translate3d(0,-70%,0);}
}
do the same everywhere you have been using translates in your example. translate3d enables hardware acceleration which will help with animations.
you can see this post for more info.
You can use a fallback to IE-11 with the vendor prefix "-ms-transform".
for example:
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
-ms-transform: translateX(-20%);
}
See the answer here.
CSS3 transform:scale in IE
I have a long image that I want to slide on the screen with a scrolling effect, like on the apple tv's webpage (the floating/scrolling movie covers):
this is the markup i use:
<div class="header">
<div class="slider">
</div>
</div>
and this is the css:
.header{
height: 610px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.header .slider{
height: 540px;
background: url("../images/header.jpg");
position: relative;
border-left: 10px rgb(34,34,34) solid;
border-bottom: 10px rgb(34,34,34) solid;
border-right: 10px rgb(34,34,34) solid;
left: 0;
top: 60px;
width: 450%;
animation: moveSlideshow 40s linear infinite;
-webkit-animation: moveSlideshow 40s linear infinite;
-moz-animation: moveSlideshow 40s linear infinite;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
here is the css animation:
#keyframes moveSlideshow {
100% {
-webkit-transform: translateX(-300%);
}
}
it occurs that the slideshow is scrolling but for only once and it soon scrolls out of the screen after the entire image is scrolled(and also with some part of the beginning!)..
the image is:
please help
Do You mean something like this?
#keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-webkit-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-o-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-moz-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}
<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>
I'm not familiar with the apple tv effect you're referencing, but if you want it to loop over and over you need to add an additional keyframe # 0% with translateX(0); and then use the width of the image in your # 100% translateX();
So if you have a 2000px image your animation would look like :
#keyframes moveSlideshow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2000px);
}
}
Here's a pen: http://codepen.io/NeilWkz/pen/wWMzwe
(!NOTE: I turned on auto-prefixer as you code was busted in everything but chrome !)
I am using Codepen and would like one of my elements to fade in and out. I can't find any errors in my code but it is still not working. Thanks for any help!
The item is a little logo box that you press to open up a new window with text. It currently changes on mouseover but I would also like to make it fade in and out so that people know they need to click it.
Thanks Danko, I got it working now! Can't believe the issue was that simple haha :)
.mainlink a:link, a:visited {
display: block;
background: url(http://i.imgur.com/E3EQRWV.jpg?2);
background-size:cover;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
animation: fadin 3s infinite alternate;
-webkit-animation: fadin 3s infinite alternate;
-moz-animation: fadin 3s infinite alternate;
-o-animation: fadin 3s infinite alternate;}
#keyframes fadin {
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-webkit-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-moz-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-o-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
The problem here is opacity doesn't accept % as unit value. Change it to a value between
1 and 0 Where 1 = 100% and 0 = 0%
Try this:
#keyframes fadin {
0% {opacity: 1;}
100% {opacity: 0;}
}
.mainlink a {
display: block;
background: url(http://i.imgur.com/E3EQRWV.jpg?2);
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
animation: fadin 3s infinite alternate;
-webkit-animation: fadin 3s infinite alternate;
-moz-animation: fadin 3s infinite alternate;
-o-animation: fadin 3s infinite alternate;
}
#keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="mainlink">
</div>