CSS clouds animation issue - html

I'm having trouble integrating this CSS clouds animation into my
website. The overflow: hidden and scroll are causing my problems.
I don't want the clouds scrolling outside of the blue box background area, but don't know how . Please see http://www.filehostfree.com/cloudcsstest/cssanimation.html
I've left a comment in the source code.

To avoid the scrollbar you have to add an overflow-x: hidden; into the container of the Clouds (#clouds).
Anyway I encourage you to avoid using margin or positioning properties (like left, right...) and use transform: translate() in animation to avoid repaint and gain in page performance.
In this fiddle I changed the #keyframes animation into
#keyframes moveclouds {
0% { transform: translateX(1000px);}
100% { transform: translateX(-1000px) }
}
Also have to add that you are using prefixed properties like:
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
but not the unprefixed one, that nowadays have so good crossbrowser support.

Regarding the scroll issue, this will remove the horizontal scroll.
.yourContainingDivClass {
overflow-x: hidden;
position: absolute;
}
Regarding why the clouds suddenly appear, you should add a negative X position at the beggining and at the end of the animation cycle:
#keyframes move_cloud {
0% {
left: 120%;
}
100% {
left: -20%;
}
}
You can play around with this Pen, if you want. It has been coded using SASS, therefore you can tweak the variables to meet your needs.
CSS3 animations and Internet Explorer (IE)
IE does not support CSS3 animations until IE10, therefore your animations will not render properly in any version of IE < 10. Checkout the support table.
Alternatives to CSS3
HTML5 Canvas:
HTML5 Canvas API offers a wider range of options to create this kind of animations. The performance is also better.
Javascript:
If you feel confortable using JavaScript, a good alternative would be to use TweenJS to animate the CSS properties via DOM, although the performance will not be the same.

Thanks for all the help guys. Appreciated , the overflow-x: hidden;
fixed the scroll issue, that was main issue, only other thing it don't work in IE but that don't bother me too much, chrome and firefox are fine, my site is working now

Related

Why is this animation not working in IE11?

I found the animation below for a screensaver I'd like to use for digital signage. Problem is, it wont work with IE11, the only browser supported on the target system.
What needs to be changed to make it work? I can't find on caniuse.com what feature isn't working in IE.
Codepen: https://codepen.io/scottkellum/pen/BoZvjR
IE11 Debug Link: https://s.codepen.io/scottkellum/debug/BoZvjR
Code with SCSS removed:
body {
margin: 0;
}
img, div {
width: 100px;
height: 100px;
}
.x {
animation: x 13s linear infinite alternate;
}
.y {
animation: y 7s linear infinite alternate;
}
#keyframes x {
100% {
transform: translateX( calc(100vw - 100px) );
}
}
#keyframes y {
100% {
transform: translateY( calc(100vh - 100px) );
}
}
<div class="x">
<img class="y" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="codepen" />
</div>
If it isn't possible to use that exact way, is there another way to bounce an image around the screen?
EDIT: I can't finde the solution in the proposed answer of CSS3 animation is not working in IE11 but works in other browsers: There is no running statement in the animation, I tried adding the overflow:visible and the containers don't change size.
I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.
I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)

Create Background Color CSS3 Animations after Background Image Animation

I am trying to create background-color CSS3 Keyframe animations after the first animation which is a background image. I am not able to create another animation after the text animation fades. After the text animation fades, I would like the background's opacity to turn to 0.3 and once again fade in text. Below is what I have.
Please see full code here: codepen:https://codepen.io/imdaone/pen/JJrYyV
.background {
width: 80%;
height: 220px;
margin: auto;
background: url(imgs/ad-ex.png) no-repeat top left;
background-size: 100%;
animation: move 5s 1 linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Looks like you are trying to attempt to do animations with sequences. If I am not wrong, you cannot do it with pure css. You might want to venture into using some javascript animation library where it can handle sequencial animation.
You can still use vanilla js but i think its more tedious just to achieve what you want

Can I use keyframes without browser detection?

I am making a site that uses some CSS3 keyframes animations.
The guides I have seen suggest using separate code for each browser specifying which code is for what browser as I go along.
eg. This guide which suggests:
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
And this one Which suggests slightly different grouping but essentially the same thing.
However I have seen many articles saying that browser detection is poor practice in modern webpages.
This page (same site as above)
W3C agrees but feels an exception could be made for browser prefixes in css.
Is it possible to use keyframes using an approach that just queries the support of the feature rather than specify a browser?
However I have seen many articles saying that browser detection is poor practice in modern webpages.
Yes, browser detection is not good practice as it is unreliable and likely to break in the (near) future.
However, what you are doing here is not "browser detection" as described in that article. You are using vender prefixes.
Vender prefixes are OK, the accepted way of doing this (implementing a feature that is still considered "draft"). It is the only way of doing this.
"The problem" is that browsers don't necessarily support the "standard" way of doing this yet, ie. without the vendor prefix. Probably because they implemented this before it was a standard; before the "final" implementation has been agreed. In the meantime they implement how they think it will work and use a vendor prefix. The vendor prefix'd rule might not work the same way as the final "standard".
So, the vendor prefix'd version will always (or for a while yet) work in the browser it is designed for. The browser ignores all other vendor prefixed rules (in CSS, if a browser does not understand something it should ignore it). When the browser does implement the standard and starts to support the non-vendor-prefixed rule then that is the rule that will take priority.

Maintaining continuity of animation

I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular
the problem is that there is no continuity in the animation there are a few pauses i think my problem is here
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}
#-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}
}
http://jsfiddle.net/tuuqhgk3/2/
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
-webkit-animation-timing-function: linear;
}
This should give you a continuous animation speed, rather than the easing (pauses) that is set by default.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
Try updating your anim2 to this:
#-webkit-keyframes anim2 {
0% {margin-left: 280px; transform: rotate(220deg);}
15% {margin-top: 80px;}
100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}
}
To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.
Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).

Pure Fullscreen CSS Slideshow with double fade in/out effect for displaced elements on background slide elements

I'm trying to have this slide show jsfiddle with cover background images slides and displaced text on it, working without the auto loop animation, only by buttons.
All elements of the slideshow have separate fade in/out applied, so background is shown before text.
Try to click on buttons, everything work fine, but I'm not able to remove autoloop.
Probably I've to change animation for transition,and remove -webkit-animation: titleAnimation 24s linear infinite 0s; on all elements, I don't know. I've tried but without success.
I've solved my problem, I put here the solution, could be interesting for someone seeking for something like this. I wasn't able to find something similar online.
I have updated the animations like this:
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
from {
opacity:0;
}
to {
opacity:1;
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
from {
opacity:0;
}
to {
opacity:1;
-webkit-animation-fill-mode:forwards; }
}
and added an animation fill mode to the elements to force them stay at last animation frame (still visible with opacity:1)
-webkit-animation-fill-mode:forwards;
Here the DEMO