How to repeat a particular action parallely in CSS

Question

well lets say i have 3 clouds !! i programed 1 cloud to rain how to it for the next two clouds by using my previous code?? (if u check this code u will understand even more clearly👇👇)
https://code.sololearn.com/WI7OqLSsq6j4/?ref=app

Answer 1

https://code.sololearn.com/WMZ3mbr4AEgV/?ref=app

reduced the code by creating drops with JS and randomizing CSS settings for each one

Answer 2

In my browser your code does not work, and for +900 lines of code should be needed the cross-browser compatibility.

Remember that more lines in most cases don't make you a good programmer, less lines for do the same thing are always the best solution.

For your question, if i understand correctly (and maybe not, tell me if i'm wrong)... you want to apply same property to multiple elements with some changes beetwen them, you can separate your selectors with the "," then apply your single changes to specific elements:

element-1, element-2 { /* common rules */ }
element-1 { /* unique rules */ }

[ EDIT ]

Keyframes are not compatible with my browser, use this syntax:

@-webkit-keyframes

An use it for "transform" property too.

Answer 3

What a nice outcome 😍☁☔

@Burey that reduction was outstanding!! 😍👌
May I ask you a question, how can we make this animation compatible with SL's app WebView?
I added the prefix -webkit- in the CSS for keyframes and transform, but it's not working, I assume because we have to add the prefix to the css animation property, which is manipulated with JS.

I guess my real question is, can we set the animation property using the webkit prefix in JS?

This is what we have:

cloud.style.animation="cloud-motion "+(Math.random()*10+5)+"s infinite";

Can we do something like the following? Or is there another way?
cloud.style.webkitanimation = ...

Thanks 😊

Answer 4

45 lines only, you're a master @Burey! 😱

Answer 5

@Kirk_Schafer you couldn't be any more precise, I was able to "fix" an animation with this :P thank you sooooo much for all the detailed resources! 😊👌 I hope those flags replace vendor prefixes soon, I would save a decent amount of lines in my animation codes. Thanks again 😊!

Answer 6

i will add some comments as well xD
brb

Answer 7

hmm
sort of done i guess

ask anything if you need elaboration ^_^

Answer 8

oh wow been busy here while i was sleeping o_O

and i see all questions have been answered :)
thanks everyone for this group effort 🤗

Answer 9

@Maz :: with whitespace removed, 37 lines. Truly a master.

Answer 10

Take a look at my code.
I use just one animation for 3 elements, also it supports cross browser animation.
I hope it helps. ☺
Prerequisite: JQuery/js knowledge.
Code:
https://code.sololearn.com/WR1Advy4QUk0/?ref=app

Answer 11

well that is what i did for the could 1
cloud 1 itself took almost 900 lines😥
if do the same for cloud 2 and 3 i need to change 2700 lines😪

its not like u think
just visit that code once😅

Answer 12

@ James
tnx man✌️✌️

Answer 13

really thanks for ur support guys😁😁
@ Burey u are awseme man
i never imagined that it could be done in 45 lines😅

@MAZ i never knew that increasing lines would make the program fail 😅😅 as it worked for me though!!

also i will try to do it in lesser codes next time😉

Answer 14

@Pαolα

[JS] lines 39-43 set javascript vendor style transforms:
https://code.sololearn.com/WP9mCj3EjUi5/?ref=app

(old) Detecting support/Javascript names:
https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/

Detect supported prefixes, translate from style property names to JS, a description of the prefixes, what hyphens mean, etc:
http://www.javascriptkit.com/javatutors/setcss3properties.shtml

A bit of the motherlode: Polyfills and shims for making browsers work together, including css autoprefixers so you can just stick to writing clean code:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

By the way, vendor prefixes are such a big problem--they're not supposed to be used in production--that vendors are looking towards 'flags'.
https://www.sololearn.com/discuss/286904/?ref=app

Answer 15

@U L... it's amazing what you can do by reusing work--whether that's lines in a loop, an included library or functions.

But it is learned. I've seen self-taught programmers... owning big businesses... copy code instead of reusing it; because no one had ever shown them anything else. It worked but it was kinda painful.

You're in a good position here because you're getting alternatives in a timely way -- at the pain point -- and I really hope it all works for you :)