Here's what I've got: http://jsfiddle.net/t5p8ypxs/9/
And here is my css:
.wrapper{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.square{
width:100px;
height:100px;
position: absolute;
background-color:red;
-webkit-animation: imageFrames01 5s ease-out infinite;
-moz-animation: imageFrames01 5s ease-out infinite;
animation: imageFrames01 5s ease-out infinite;
}
#-moz-keyframes imageFrames01 {
0% {
left: 0%;
top: 0%;
}
15.15152% {
left: 0%;
top: 0%;
opacity: 1;
}
30.66667% {
left: 154%;
opacity: 0;
top: -98%;
}
30.67667% {
left: -63%;
opacity: 1;
top: -138%;
}
90.48485% {
left: -63%;
opacity: 1;
top: -138%;
}
}
#-webkit-keyframes imageFrames01 {
/*Same as above in #-moz-keyframes*/
}
#keyframes imageFrames01 {
/*Same as above in #-moz-keyframes*/
}
Safari is the only browser to animate this as I would expect.
Move in from the top-left
Move out to the top-right
Repeat to infinity
In Chrome I get this:
Just appears, with no animation
Move out to the top-right
Repeat to infinity
Firefox is worst with no position animations. Only opacity...
Any ideas. Why is this?
I am using Safari 8, Chrome 42, and Firefox 33
-moz-animation: imageFrames01 66s ease-out infinite;
Try to change the 66s to 5s like the others for Mozilla...
Related
I want an arrow first to fade-in on my site in 1.5 seconds, and after 3 seconds I want it to do a little bounce movement to indicate a scroll movement. I want to repeat the bounce animation every 3rd second but the fade-in only once (when I reload the page).
My code now:
arrow {
position: absolute;
width: 100px;
top: 85vh;
animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s ease-in;
}
#keyframes arrowInn{
from{
opacity: 0;
}
to{
opacity: 100%;
}
}
#keyframes arrowBounce {
0% { bottom: 0px; }
50% { bottom: 10px; }
100% { bottom: 0px; }
}
Your code is already working, you just forgot to add infinite on your second animation:
div {
position: absolute;
width: 100px;
bottom: 10px;
animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s infinite ease-in;
}
#keyframes arrowInn {
from { opacity: 0; }
to { opacity: 100%; }
}
#keyframes arrowBounce {
0% { bottom: 10px; }
50% { bottom: 0; }
100% { bottom: 10px; }
}
<div>⬇️</div>
Also, if you want to make it bounce from the bottom you have to set the bottom property instead of the top on your element. I reversed your arrowBounce animation to make it start from 10px instead of 0, but this part is up to you.
Here is all my code... I have two divs that will be moved in opposite directions and exit the screen to redirect to another page. The problem is that the div with id="hat" completes the animation and the div with id="sock" does not move at all. I have tested it in browsers, my IDE live preview. Both did not work.
HTML:
body {
background-color: white;
}
.box {
/* TITLES OF CHOICES */
position: relative;
background-color: gainsboro;
border-radius: 50%;
width: 400px;
height: 400px;
display: inline-block;
margin: 10%;
transition: all 1s;
}
#hat {
background-image: url(hat.jpg);
background-position: center;
}
#sock {
background-image: url(sock.jpeg);
background-position: center;
}
div.box:hover {
/* CHANGE COLOR WHEN MOUSE HOVER */
opacity: 0.5;
}
*/
/* left exit */
#-webkit-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#-moz-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#-o-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
/* right exit */
#-webkit-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#-moz-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#-o-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
/* ANIMATION SETTING */
#hat {
-webkit-animation: pageExitLeft 2s 1 forwards ease-out;
-moz-animation: pageExitLeft 2s 1 forwards ease-out;
-o-animation: pageExitLeft 2s 1 forwards ease-out;
animation: pageExitLeft 2s 1 forwards ease-out;
}
#sock {
-webkit-animation: pageExitRight 2s 1 forwards ease-out;
-moz-animation: pageExitRight 2s 1 forwards ease-out;
-o-animation: pageExitRight 2s 1 forwards ease-out;
animation: pageExitRight 2s 1 forwards ease-out;
}
<div class="box" id="hat">hat</div>
<div class="box" id="sock">sock</div>
The editor I use is Brackets. I have been trying to find a solution to the transition I am trying to do but couldn't find anything.I have tried to make the animations work and apparently the only place it works is in the website codepen.io I also tried to use it on jsfiddle.net still no difference.
I wanted to make an image of arrow moving so that readers know they can scroll down to read more content. I tried to do that with the animation in CSS but it didn't work.
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
#-webkit-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-moz-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-ms-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-o-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
<section class="scrollDownContainer">
<img src="./image/arrow.png">
</section>
Can anyone tell me why? Thank you.
You can use transform: translateY(...) in keyframes
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
margin: auto;
animation: arrowmove 0.5s infinite;
}
#keyframes arrowmove {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0%);
}
}
<section class="scrollDownContainer">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" width="50px" height="50px">
</section>
The left: and top: properties of the animation will have no effect on your image because the image CSS does not contain a position property.
Add position: relative; or position: absolute; to the CSS for the image...
section.scrollDownContainer img {
position: relative; /* <------------------- added */
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
The animation should then function.
Using left:, right:, top:, or bottom: in CSS requires the element to also have a position property.
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo
Here is the code, I really dont understand what is wrong.
I also tried using -webkit- but did not make any difference trying to move the objects accross the screen, simple animation
HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
CSS:
.cloud {
background: url(../image/cloudskills.svg)no-repeat;
height:100px;
width:130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(../image/balloonworks.svg)no-repeat;
width: 100px;
height: 130px;
text-indent: -999em;
animation: balloon 5s linear infinite;
}
#keyframes balloon{
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
Js Fiddle
for the elements to make some animation position should be given so aboslute or relative or you can use margin in keyframes to move the element
.cloud {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
height:100px;
width:130px;
background-size:100px auto;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
background-size:100px auto;
width: 100px;
height: 130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
position:relative;
}
#-webkit-keyframes balloon {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
I changed only a bit of your code http://jsfiddle.net/2gbngtxp/
#-webkit-keyframes cloud {
0% {
left: 0;
}
50% {
margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/
}
100%{
left:0;
}