{"id":6146,"date":"2017-01-30T19:31:47","date_gmt":"2017-01-30T19:31:47","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=6146"},"modified":"2019-09-24T04:20:53","modified_gmt":"2019-09-24T04:20:53","slug":"css3-tricks-falling-leaves-css","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/","title":{"rendered":"CSS3 Tricks: Falling Leaves Animation with CSS only"},"content":{"rendered":"

In today’s tutorial, we will create Falling leaves animation<\/strong>\u00a0effect without any help of javascript. When I started playing with CSS3<\/strong> I never thought that I could make such fascinating animations with it. I made falling leaves<\/strong> animation in both Flash\u00a0and Javascript but I never thought that it is possible to make it with CSS3 only<\/strong>. While it is not as cool as the Flash one, it is still fairly decent and it uses less CPU. I recommend that you download the source files first and check the live demo. If you’d like to print these instructions as a reference, ordering new ink online is the easiest route – the best ink providers also offer toner cartridge recycling free<\/a> of charge to all customers.<\/p>\n

I also just prepared a Falling Snow CSS Animation<\/a><\/strong> for winter is coming. \ud83d\ude42<\/p>\n

We just developed our own free<\/strong> version of the Falling snow \/ leaves WordPress Plugin<\/strong><\/a>.<\/p>\n

LIVE DEMO<\/h3>\n

CSS3 Falling Leaves Preview!<\/a><\/div><\/div><\/div>
\nDownload Falling Leaves Source Files<\/a><\/p>\n

SETTING UP THE LEAVES<\/h3>\n

We add one instance of the leaf with the <span><\/span> tag. If you wish to add more leaves simply multiply this tag. Now create a file style.css and add the design for the class created above:
\n


\n.fallingLeaves span {
\ndisplay: inline-block;
\nwidth: 80px;
\nheight: 80px;
\nmargin: -280px 40px 54px -34px;<\/p>\n

background:url(“leaf.png”);<\/p>\n

-webkit-animation: fallingLeaves 10s infinite linear;
\n-moz-animation: fallingLeaves 10s infinite linear;
\n}
\n<\/div>
\nAdd the leaf here as a background for each instance of span that we defined earlier. Size and initial position of the leaves is set here. Webkit animation<\/strong> is actually pretty simple. We set which class to animate (fallingLeaves<\/strong>) and set the falling time to 10 seconds. We want the animation to continuously\u00a0repeat itself so we will set it to infinite<\/strong>. Eeasing is set to linear to achieve a smooth falling effect.<\/p>\n

Before we get to the animation effect we have to somehow randomize the leaves so they don’t all start falling at the same time. I used the\u00a0nth-child method to define several sequences of leaves with different animation delays.
\n


\n.fallingLeaves span:nth-child(5n+5) {
\n-webkit-animation-delay: 1s;
\n-moz-animation-delay: 1s;
\n}<\/p>\n

.fallingLeaves span:nth-child(3n+2) {
\n-webkit-animation-delay: 1.5s;
\n-moz-animation-delay: 1.5s;
\n}<\/p>\n

.fallingLeaves span:nth-child(2n+5) {
\n-webkit-animation-delay: 1.7s;
\n-moz-animation-delay: 1.7s;
\n}
\n<\/div><\/p>\n

Check Our WordPress Themes<\/a><\/div><\/div><\/div>
\nThese are just three examples, I added several more sequences in the live example<\/a><\/strong> provided above. Download the source files to see them all. First sequence is set to 5n+5 which means leaves number 5, 10, 15,… will start falling with the delay of 1 second. Second sequence is set to 3n + 2 which means leaves 2,5, 8, 11,… will start falling with the delay of 1.5 second. Note that some sequences may overlap with each other but it’s not a big deal, the css will always take the last setting and use it for the animation.<\/p>\n

Unlimited WordPress Themes & Plugins From $16.5<\/h3>\n

\"\"<\/a>
\n<\/p>\n

IF YOU LIKE LIST ANIMATION YOU CAN ALSO CHECK OUR WORDPRESS THEME WITH RAIN ANIMATION<\/h3>\n

\"CSS<\/a><\/p>\n

We are proud to present our fresh new WordPress theme: Raindrop<\/strong><\/a>. It is a multipurpose and flexible theme that offers you an almost unlimited variety of unique page layouts. We recently developed a free WordPress Blog Theme that I believe would be a nice start to your blogging journey<\/a>.<\/p>\n

 <\/p>\n

SETTING UP THE LEAVES ANIMATION<\/h3>\n

All we have to add now is the animation effect. It is actually pretty simple. Add the following code to your style.css file:
\n


\n@-webkit-keyframes fallingLeaves {
\n0% {
\nopacity: 1;
\n-webkit-transform: translate(0, 0px) rotateZ(0deg);
\n}
\n75% {
\nopacity: 1;
\n-webkit-transform: translate(100px, 600px) rotateZ(270deg);
\n}
\n100% {
\nopacity: 0;
\n-webkit-transform: translate(150px, 800px) rotateZ(360deg);
\n}
\n}
\n<\/div>
\nAs you can see we divided our animation into three parts (state at 0%, at 75% and at 100%). Animation starts with x and y coordinates set to 0px and rotation along Z axis also set to 0. This is the initial position of the animation. After the animation starts it will start moving towards position set in the second part (75%). Leaves will move slightly to the right (x coordinate is set to 100px) and down (y coordinate is set to 600px). It will also rotate for 3\/4 of the full circle (270deg). Leaves will still be fully visible (opacity is set to 1). Opacity is the reason why we added the second part of animation anyway. It allows us to slowly fade the leaves<\/strong> to invisible<\/strong> after they reach a certain point. When leaves reach the ending point (100%) they are instantly moved back up where they start animating again. And we are done. The implementation is pretty simple and straightforward and you get a decent falling leaves effect in no time.<\/p>\n

CONCLUSION<\/h3>\n

CSS3 animations can be very powerful and diverse and even animation of multiple objects is a piece of cake. Please note that these animations are only supported in webkit browsers (Chrome, Opera). In our future tips&tricks posts I will show you how to make gradients, apply animations to images and much more so stay tuned!<\/p>\n

Download Falling Leaves Source Files<\/a><\/p>\n

Check Our WordPress Themes<\/a><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

In today’s tutorial, we will create Falling leaves animation\u00a0effect without any help of javascript. When I started playing with CSS3 I never thought that I could make such fascinating animations with it. I made falling leaves animation in both Flash\u00a0and Javascript but I never thought that it is possible to make it with CSS3 only. …<\/p>\n","protected":false},"author":1,"featured_media":43007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,178],"tags":[718,731,721],"yoast_head":"\nCSS3 Tricks: Falling Leaves Animation with CSS only - PremiumCoding<\/title>\n<meta name=\"description\" content=\"In today's tutorial, we will create Falling leaves animation\u00a0effect without any help of javascript. When I started playing with CSS3 I never thought that\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Tricks: Falling Leaves Animation with CSS only - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"In today's tutorial, we will create Falling leaves animation\u00a0effect without any help of javascript. When I started playing with CSS3 I never thought that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-30T19:31:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-24T04:20:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2017\/01\/css3-tricks-falling-leaves-animation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"390\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials & Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2017\/01\/css3-tricks-falling-leaves-animation.jpg\",\"width\":800,\"height\":390,\"caption\":\"css3 tricks falling leaves animation\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/\",\"name\":\"CSS3 Tricks: Falling Leaves Animation with CSS only - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#primaryimage\"},\"datePublished\":\"2017-01-30T19:31:47+00:00\",\"dateModified\":\"2019-09-24T04:20:53+00:00\",\"description\":\"In today's tutorial, we will create Falling leaves animation\\u00a0effect without any help of javascript. When I started playing with CSS3 I never thought that\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"CSS3 Tricks: Falling Leaves Animation with CSS only\",\"datePublished\":\"2017-01-30T19:31:47+00:00\",\"dateModified\":\"2019-09-24T04:20:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#webpage\"},\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#primaryimage\"},\"keywords\":\"css3 animation,css3 falling leaves,css3 tricks\",\"articleSection\":\"Blog,Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/css3-tricks-falling-leaves-css\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/6146"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=6146"}],"version-history":[{"count":0,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/6146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/43007"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=6146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=6146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=6146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}