I'm trying to create some Easter animation with a little bunny that catches a falling egg. Now that's working great, but where i'm having troubles is that i can't seem to create a button that restarts my multiple animations and let's them fall/move down again once more.
I've tried alot of things this one seemed was the closest i could get but this only seemed to play/pause the whole thing and the elements would disappear after i released the hover.
#logo:hover ~ #ei, #otherelements{ -webkit-animation-play-state:running; }
/* most likely the problem /*
animation-iteration-count: 1;
But since the multiple animations move separately i kind of need the animation-iteration-count 1
Does anyone know if this is possible with just CSS or do i need to implement some javascript/jQuery?
http://jsfiddle.net/p5r9F/
This is easy young squire (Sorry)
#keyframes yournameofanimation {
0% {top: 0; left: 0; background: #dda221;}
50% {top: 500px; left: 100px; background: #e0e0e0;}
100% {top: 0; left: 50px; background: grey;}
}
.nameofclass {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
position: relevant;
}
.nameofclass:hover {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
}
</style>
<div class="nameofclass">
<p> Try it! </p>
Related
I created a background with 3 images using keyframes. I first created the project just using html and css, but now I'm trying to create my project using NextJS.
In the html/css version, this transition is working fine, but in NextJS the 3th image won't show, I get a white screen, the fist two however work fine.
Can anybody help me with this please? Please find added my code:
.mainheader {
height: 100vh;
position: relative;
color: #fff;
animation: animate ease-in-out 10s infinite;
background-size: cover;
}
#keyframes animate {
0%,
100% {
background-image: url(../assets/afbeeldingen/bg-3.jpg)
url(../assets/afbeeldingen/bg-1.jpg);
}
33% {
background-image: url(../assets/afbeeldingen/bg-1.jpg),
url(../assets/afbeeldingen/bg-2.jpg);
}
66% {
background-image: url(../assets/afbeeldingen/bg-2.jpg),
url(../assets/afbeeldingen/bg-3.jpg);
}
}
First, I dont know if this applies to your case since you didnt provide a link or snippet to your problem code. I was experiencing the same problems with a slideshow css animation.
#slideset1 > * {
position: absolute;
height: 10rem;
top: 0;
left: -22.5rem;
animation: 12s autoplay1 infinite ease-in-out;
}
The HTML/CSS code works on codepen, but when transferred to nextjs environment it just didnt animate. After trying various suggestions, what resolved it was this from Alex Galays. To not use the shorthand for the animation property but to specify each animation property that you use separately.
#slideset2 > * {
position: absolute;
height: 10rem;
top: 25rem;
left: 0;
animation-duration: 12s;
animation-name: autoplay2;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
You can see it working here on codesandbox
Cant/didnt test with your case, but you can apply it to your own code.
I'm using a keyframes animation for a transformation. It works perfectly on desktop, but it acts extremely strange on mobile. I'm testing on Chrome on my Macbook and on Chrome on my iPhone X. Another user found the same issue on Safari on iPhone.
Basically, when the page loads, the animation doesn't play. The delay works, but the actual transition and fade doesn't happen. You can see what it should look like (from a computer) at asilhavy.com. It doesn't play on load, but if I go to a new page and select the back button, it will play after I scroll. So weird. The scroll bar is also weird when I go back after visiting a new page.
I'm suspicious that it might be something very wrong somewhere else in my code, but I don't know where. Any pointers on where to look are helpful. The full code is available at the link above, but here's the code I have now specifically for that animation. I've gone through a few other solutions, like setting display: block, using -webkit-, and avoiding shorthand animation.
Update: Through more debugging it appears ios and safari aren't rendering properly. The animation is technically playing, but the transition (ease) isn't following. They move, just not smoothly.
#-webkit-keyframes slide-in {
from {
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes slide-in {
from {
transform: translateX(-150%);
}
to {
transform: translateX(-50%);
}
}
.land-cont {
overflow: hidden;
position: absolute;
top: 30px;
left: 0;
height: 80px;
width: 250px;
}
.reveal-cont {
transform: translateX(-150%);
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 1.6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
-webkit-animation-name: slide-in;
animation-duration: 0.6s;
animation-timing-function: ease;
animation-delay: 1.6s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: slide-in;
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: calc(50% - 50px);
background: rgb(32, 6, 6);
left: 50%;
z-index: 2;
color: #FFF;
z-index: 2;
background: -webkit-linear-gradient($gradient);
background: -o-linear-gradient($gradient);
background: linear-gradient($gradient);
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
opacity: 1;
}
<div class="land-cont">
<div class="reveal-cont">
<h2>Alicia</h2>
</div>
</div>
Finally fixed it. I can't point to one exact change, but I know this question was the one that got it working in the end. Turns out the problem was in iOS and Safari, not Chrome. Here's a list of changes I made:
Implemented proper use of -webkit-
Didn't use shorthand animation
Used display: block
Added animation class after page load
I'm not sure why that last one works, but it fixed it. If anyone knows why it worked please let me know.
My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.
This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example
I'm a bit of a newbie to CSS3 animations, but I've looked everywhere, and I can't find a solution to this problem. I have a JSP page that I want the background to slowly fade from green to blue, and then slowly fade the opposite way and repeat this process infinitely.
I currently have it go from green to blue smoothly, but then it jerks back to blue instantly. Is there a way to play two animations from green to blue, then blue to green and repeat infinitely?
Here's the CSS code I have now:
#keyframes changeColorGreenToBlue {
from { background-color: rgb(146,213,142);}
to {background-color: rgb(133,184,222);}
}
#keyframes changeColorBlueToGreen {
from {background-color: rgb(133,184,222);}
to { background-color: rgb(146,213,142);}
}
.jumbotron {
height: 100%;
width: 100%;
background-color: green;
animation: changeColorGreenToBlue ease;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: changeColorBlueToGreen;
animation-iteration-count: infinite;
animation-duration: 4s;
background-size: cover;
background-repeat: repeat-y;
margin-bottom:1px;
}
It's a little messy because I was just trying everything to get it working. Sorry about that!
Rather than two keyframe animations, you want one that changes the background color twice (once at 50%, and back at 100%), like this:
#keyframes changeColor {
0% {
background-color: rgb(146,213,142);
}
50% {
background-color: rgb(133,184,222);
}
100% {
background-color: rgb(146,213,142);
}
}
See my codepen for example in action.
[Edit: Solution was to create two containers, with the second animation container set to left: 100%.]
I have a very basic animation to move a large gif across the page, the gif is 1536px wide.
The page can be infinitely wide and thus the animation starts at right:0px and ends at right:100%. In reality, I don't expect the page to ever be larger than the highest monitor resolutions used currently.
In order to create the feeling that the animation was occurring infinitely I have created a second animation and started this at right:-1536px and ending at right:100%.
Unfortunately, as this second animation is covering a greater distance it is moving faster than the first and my attempted seamless animation doesn't work. Is there a way to specify that animation-duration work at a constant 1px per second or something equivalent instead of a duration? I don't believe I can increase the duration to match as the browser could be any size.
Any help or ideas appreciated!
My code is as follows:
#-webkit-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
#-moz-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
.frontrocks-anim2 {
-webkit-animation:frontrocks-anim2 30s infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-delay: 0s;
-moz-animation:frontrocks-anim2 30s infinite;
-moz-animation-timing-function:linear;
-moz-animation-delay: 0s;
}
UPDATE
A better solution is to adapt Oriol's comment from https://stackoverflow.com/a/21088405/603369
That provides a smoothly scrolling background, so all that is left is to animate the background element to "fly in" upon page load.
The problem is that the initial "fly-in" must be based on the width of the container (e.g., the page), while the repeating background must be based on the width of the background image. That leads to some oddities in timing, where the initial "fly-in" from the right side may be significantly faster or slower than the background animation. You might be able to adapt this solution further by using JavaScript to adjust the timing based on the width of the page, but this should give you a starting point.
header {
position: relative;
overflow-x: hidden;
width: 100%;
height: 52px;
border: 1px solid #ccc;
}
.bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: -1536px;
background: url(https://placehold.it/1536x50/cceecc) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: slide-in, bg-anim-repeat;
-webkit-animation-duration: 5s, 5s;
-webkit-animation-timing-function: linear, linear;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-delay: 0s, 5s;
}
#-webkit-keyframes bg-anim-repeat {
0% {-webkit-transform: translateX(0);}
100% {-webkit-transform: translateX(-1536px);}
}
#-webkit-keyframes slide-in {
0% {left: 100%;}
100% {left: 0;}
}
<header>
<div class="bg"></div>
</header>
Original
If the page is larger than 1536x2, you're going to have an odd visual look as the two gifs march across the screen. But if this is what you want to go with, try delaying the beginning of the second animation until halfway through the first animation.
Demo of the second option is below
header {
position: relative;
overflow-x: hidden;
width: 100%;
height: 52px;
border: 1px solid #ccc;
}
header img {
position: absolute;
left: 100%;
}
#-webkit-keyframes frontrocks-anim {
0%{left:100%;}
100%{left:-1536px;}
}
#image1, #image2 {
-webkit-animation:frontrocks-anim 10s infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-delay: 0s;
-moz-animation:frontrocks-anim 10s infinite;
-moz-animation-timing-function:linear;
-moz-animation-delay: 0s;
}
/* Delay is 1/2 of the total animation time */
#image2 {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
<header>
<img src="https://placehold.it/1536x50/cceecc" alt="moving image 1" id="image1">
<img src="https://placehold.it/1536x50/eecccc" alt="moving image 1" id="image2">
</header>