Monday, May 16, 2016

CSS3 Smoke Animation Effect

The comic today uses quite a bit of CSS3 animation. This is a rather new thing for me - I've been using mostly JavaScript-powered animations on Amphibian.com since it started. But after I did the rain animation using CSS back in March (see the comic here), I've been warming up to the idea of more CSS and less JavaScript to move things around.

For this task, I wanted to make some animated smoke come out of the frogs' rocket ship before the launch. My style is mostly just simple geometric shapes arranged to look like things, so using circular DIV elements to look like puffs of smoke was fine with me. I found a great starting point by Andrea Verlicchi on CodePen, and then modified it for my comic.

Here's the basic idea - puffs of smoke emanate from a given source element. They move downward and off to the side while fading away.

The puffs of smoke will be represented by rounded SPAN elements, with this CSS applied to them:

span.smokepuff {
    display: block;
    position: absolute;
    bottom: -35px;
    left: 50%;
    margin-left: -20px;
    height: 0px;
    width: 0px;
    border: 35px solid #4b4b4b;
    border-radius: 35px;
    left: -14px;
    opacity: 0;
    transform: scale(0.2);
}

The above styling just makes them round, grey, and positioned absolutely in their container. I also have two animation keyframes defined, one for the down-and-left movement and one for the down-and-right movement:

@keyframes smokeL {
    0% {
        transform: scale(0.2) translate(0, 0);
    }
    10% {
        opacity: 1;
        transform: scale(0.2) translate(0, 5px);
    }
    100% {
        opacity: 0;
        transform: scale(1) translate(-50px, 80px);
    }
}

@keyframes smokeR {
    0% {
        transform: scale(0.2) translate(0, 0);
    }
    10% {
        opacity: 1;
        transform: scale(0.2) translate(0, 5px);
    }
    100% {
        opacity: 0;
        transform: scale(1) translate(50px, 80px);
    }
}

The above keyframe definitions define an animation that will move the smoke puffs lower by 80 pixels and 50 pixels to either side while at the same time scaling them up and fading them out. It defines 3 steps: 0% (the start), 10% (moved a little down), and 100% (moved completely down and over). There's one for the left, smokeL, and one for the right, smokeR.

Note: if you care about being compatible with slightly older browsers, you would want copies of these with @-moz-keyframes and @-webkit-keyframes as the names as well as adding -moz-transform and -webkit-transform to them all! I left that out here to keep the example simpler!

I said this was pure CSS3 animation, but there's still a little JavaScript involved. It doesn't really do the animating, but I use some code to generate the puffs in the first place. Something like this:

function createSmoke(time, num) {

    var timeGap = (time / num); 

    for( var i = 0; i < num; i++) {

        var delay = (timeGap * i) + 's';

        var aniName = "smokeL";
        if (((i+1) % 2) == 0) {
            aniName = "smokeR";
        }

        var aniStyle = "animation: " + aniName + " " + duration + " " + delay + " infinite";
        $('#smoker').append('<span class="smokepuff" style="' + aniStyle + '"></span>');

    }

}

When this function is called, you give it the length of the animation and the number of puffs of smoke you want. It figures out how much of a delay there should be between each puff's animation starting based on those two values. For example, if you want the animation to run 5 seconds and have 10 puffs of smoke, the first puff would have no delay, the second would have a delay of ( 5 / 10 ) * 1, the third a delay of (5 / 10 ) * 2, and so on. In this example, that just means add a half-second delay for each puff you generate. Also, each time through the loop, it alternates between the smokeL and smokeR animations so that every other puff moves in the opposite direction. One final piece of the total animation style is to set the repeat-count to infinite, so the puffs keep on coming! The function generates new SPAN tags with these animation styles applied and appends them to the parent element, which here is named smoker. It's just a DIV somewhere on the page - all the puffs of smoke will appear to come out of it.

The finished animation. Don't miss it!

I think the effect turned out great. Even though I used a little JavaScript to create the elements, doing all the animation with JavaScript would have been much, much more complicated. I may consider replacing all the old JavaScript-powered animation on Amphibian.com with CSS animation, and fix up my animation editor to go with it!

Now don't miss the smoke effect in today's comic! If you're reading this on the publication day (16 May 2016) the countdown to launch will be live! That means the last frame of the comic will change and do different things right up to the launch time! Keep watching it!

Amphibian.com comic for 16 May 2016

47 comments:

  1. I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
    Web Designing Training Institute in Chennai | web designing and development course | web design and programming courses

    ReplyDelete
  2. With such video you can be popular on tiktok. Why don't you try? Post some funny video and buy some first likes from this site https://soclikes.com/buy-tiktok-likes and see where it'll go

    ReplyDelete
  3. Our experience with students enables us to determine the fastest and most effective teaching methods Online Quran Classes for Adults

    ReplyDelete
  4. With special privileges and services, UEFA BET offers opportunities for small capitalists. Together ufa with the best websites that collect the most games With a minimum deposit starting from just 100 baht, you are ready to enjoy the fun with a complete range of betting that is available within the website

    ufabet , our one another option We are a direct website, not through an agent, where customers can have great confidence without deception The best of online betting sites is that our Ufa will give you the best price

    หาคุณกำลังหาเกมส์ออนไลน์ที่สามารถสร้างรายได้ให้กับคุณ เรามีเกมส์แนะนำ เกมยิงปลา รูปแบบใหม่เล่นง่ายบนมือถือ คาสิโนออนไลน์ บนคอม เล่นได้ทุกอุปกรณ์รองรับทุกเครื่องมือ มีให้เลือกเล่นหลายเกมส์ เล่นได้ทั่วโลกเพราะนี้คือเกมส์ออนไลน์แบบใหม่ เกมยิงปลา

    อีกทั้งเรายังให้บริการ เกมสล็อต ยิงปลา แทงบอลออนไลน์ รองรับทุกการใช้งานในอุปกรณ์ต่าง ๆ HTML5 คอมพิวเตอร์ แท็บเล็ต สมาทโฟน คาสิโนออนไลน์ และมือถือทุกรุ่น เล่นได้ตลอด 24ชม. ไม่ต้อง Downloads เกมส์ให้ยุ่งยาก ด้วยระบบที่เสถียรที่สุดในประเทศไทย

    ReplyDelete
  5. services delivery model
    What are the benefits of Managed IT Services?
    The latest technology: With a managed service provider, you’ll ensure that your business consistently uses the latest technology. IT Managed Service Providers or MSPs continually update your tech services, ensuring that your organization remains future proof.

    ReplyDelete
  6. The official app of the popular video website YouTube where you can find millions of videos. You can also upload your own video and subscribe to other YouTube channels. Also, You can search and watch your desired video. Moreover, YouTube recommends many videos on its homepage based on your interests to get you started. click here read more

    ReplyDelete
  7. Simply navigate to Control Panel > System and Security > Windows Firewall (or just type in “Firewall” in the Start Menu search box). In the Firewall control panel, select “Allow an app or feature through the Windows Firewall”; the link is seen in light blue in the screenshot above. For Completed Information visit my blog allow minecraft through firewall

    ReplyDelete
  8. 스웨디시 마사지는 여러 아시아 국가, 특히 한국에서 사용되는 고전적인 마사지 기술입니다. 앞서 언급한 많은 이론들은 마사지 부위에 더 많은 압력이 가해질수록 마사지가 더 효과적이라는 생각에 근거합니다. 또한 스웨디시 마사지에는 신체 이완, 통증 감소, 통증 감소, 혈류 개선, 순환 개선, 이완 개선, 근육 긴장 감소 등 여러 이점이 있습니다.

    ReplyDelete
  9. I have a hard time describing my thoughts on content, but I really felt I should here. Your article is really great. I like the way you wrote this information Landlord
    경마사이트
    경마

    ReplyDelete
  10. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post. I will visit your blog regularly for Some latest post. 카지노사이트

    ReplyDelete
  11. We use our first-class military and security expertise to build individually tailored guarding bodyguard company
    and intelligence operations for families, individuals, and businesses with top-notch risk control strategies.

    ReplyDelete
  12. Thanks for your efforts in sharing this post with us. This was really awesome. kindly keep continuing the great work...
    moving services near me
    commercial movers near me
    house movers ontario
    self storage company

    ReplyDelete
  13. wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    Alignment near me
    roadside assistance services
    Trailer repair
    Trailer repair shop
    Truck towing near me
    mobile truck repair

    ReplyDelete
  14. Krasota Health and Beauty Salon, health and beauty is the priority. Since opening the salon, the focus has been to match each client up with the right combination of appropriate products and services to help them look and feel their best.
    Beauty Salon Near Me
    Piercing Near Me
    Laser Hair Removal Near Me
    Waxing Near Me
    Eyelash Lift and Tint Near Me
    Microblading Near Me
    Permanent Makeup Near Me
    Microneedling Near Me
    Cryotherapy Near Me
    Microdermabrasion Near Me
    Waxing Near Me

    ReplyDelete
  15. An employee scheduling software that offers of saia employee login online employee scheduling is a wonderful tool for small and medium sized businesses. The software allows small business owners and managers to focus their full attention on their core operations.

    ReplyDelete
  16. Much obliged for sharing this brilliant substance. its extremely fascinating. Numerous web journals I see these days don't actually give whatever pulls in others however the manner in which you have plainly clarified everything it's truly awesome. There are loads of posts But your method of Writing is so Good and Knowledgeable. continue to post such helpful data and view my site too...
    How to make a paper airplane | Origami paper plane | Boomerang Airplane | how to make a eagle paper airplane | Best paper airplane design for distance and speed | Nakamura lock paper airplane
    Eagle paper plane | Zazoom

    ReplyDelete
  17. You can't afford the car you saw in the showroom. Paying it off in the long term is just not an option. That's where instant loans come in. If you take a loan from a company like Ferratum you can get a better car with no credit checks and no paperwork. Work with the team of professional writers to provide informative academic papers.

    if You need instant loan then visit: https://www.paydayloansnz.co.nz/instant-loans/

    ReplyDelete
  18. Hello, this is very useful information. After reading your article, I am very inspired to do the same as you. For those who are interested, you can visit India. An e visa to India is required for travel in India. It is possible to apply for an India visa online through evisa. I found this site & read about it and then used it. I received my Indian visa online in just a few days.

    ReplyDelete
  19. Such an interesting article here.I was searching for something like that for quite a long time and at last I have found it here. rip wheeler jacket

    ReplyDelete
  20. I am glad to be here and read your very interesting article, it was very informative and helpful information for me. keep it up. luke skywalker bespin jacket

    ReplyDelete
  21. I cant taking office on focusing long adequate to research; lots less write this rosy of article. Youve outdone your self as quickly as this cloth truely. it's miles one of the greatest contents. https://wishesquotz.com/birthday-wishes-for-brother/

    ReplyDelete
  22. ทางเข้า joker เป็นอีกหนึ่งช่องทางการทำเงินออนไลน์ สมัยใหม่ยระดับการทำเงินออนไลน์ ที่มีเงินรางวัลโบนัสที่แตกง่าย เงินรางวัลสูงโอกาสการได้รับตัวคูณเงินรางวัลมากถึง x 5000 เท่าผ่านทางเว็ป http://www.jokerslot.ninja/login-joker/

    ReplyDelete
  23. I’ve been surfing online for more than 4 hours today, yet I never found any interesting articles like yours. It’s pretty worth it for me. We are happy to announce that Myanmar evisa are now available to travelers worldwide with effect from 1st April 2022. I hope you are excited to explore the untouched beauty of Myanmar.

    ReplyDelete
  24. สล็อตแมชชีน Pgslot ออนไลน์ที่เติบโตอย่างแข็งแกร่งในยุคนี้ มีเกมให้เลือกเล่นมากมาย พร้อมอัพเดทเกมใหม่อย่างต่อเนื่อง มีรางวัลมากมาย และรางวัลใหญ่มักจะแตกง่าย รวมทั้งให้ผู้เล่นได้ใช้บริการ 24ชั่วโมง ผ่าน https://www.pgslot168game.com/ ผ่านสล็อตออนไลน์โดยตรงที่คาสิโนออนไลน์ PG Slots ที่รวบร่วมเกมมาไว้ให้เล่นแบบเยอะแยะ

    ReplyDelete
  25. Hurry Up Get Smart Home Automation Gadgets!
    Product Name:
    Centralite Temperature and Humidity Sensor - Ezlo

    Product Description:
    By detecting changes in in-home temperature and humidity, Centralite's Temperature & Humidity Sensor can add a whole range of climate control features to

    Tags:
    ezlo plus, ezlo secure, Humidity Sensor, Sensors, Temperature Sensor, Zigbee, Centralite Store, Door & Window Sensors, Ezlo 3-Day Sale, Humidity Sensors, Sensors, Temperature Sensors

    ReplyDelete
  26. Your article is very informative and useful... This hit me directly… Thanks for sharing... I would like to tell you that The travelers with a e visa to Azerbaijan can enter the country via all sea, air, and land ports. Click and check out for find more details about evisa and process.

    ReplyDelete
  27. I am very happy to see this excellent blog with us.
    Idm Crack

    ReplyDelete
  28. Highly appreciated for the uniqueness of the content. This perhaps makes readers excited to stick with the topic. Students would surely thank the blogger for coming up with innovative content to keep the readers updated to stand out from the competition.


    BY
    goggles4u eyeglasses, reading glasses online uk or cheap reading glasses uk

    ReplyDelete

  29. The most popular pos system for wine and liquor establishments is Atlanticsystem. The most effective point of sale for a liquor business.
    liquor store inventory management systems allow you to measure every drop of alcohol flowing through your premises, every minute and every day. It is easy to set up and allows staff to pour, while also allowing you to manage your liquor costs.
    All systems can be interfaced with the existing POS system in a way that is simple, fast, accurate, and invisible to customers. Real-time reports provide visibility into stock levels and stock movements.
    Atlantic System is the top point-of-sale system for liquor stores. Atlanticsystem is the most often used POS software for liquor stores.

    ReplyDelete
  30. ผู้บริการสล็อตออนไลน์ใหม่ปัจจุบันของปี 2022 กับระบบใหม่ที่ผ่านการพัฒนาที่เยี่ยมที่สุด พร้อมเปิด เกมสล็อต ออนไลน์ ได้เงินจริง ทุกค่ายดังของเว็บไซต์ ทางเข้าpigspin จัดเต็มไปด้วยเกมยอดนิยมที่มีคนนิยอมเล่นเยอะๆ มีระบบระเบียบออโต้ ฝาก-ถอน อัตโนมัติ ที่ล้ำยุค พร้อมให้บริการตรวจ 1 วัน สามารถทำรายการเพิ่มผ่านทรูวอเลท
    วันนี้พวกเรามีความรู้และความเข้าใจเคล็ดวิธีดีๆวิชาความรู้ดีๆมานำเสนอให้คนที่ได้เข้ามาเล่นได้มีความรู้ความเข้าใจก่อนพนันต่างๆ

    ReplyDelete
  31. Rice Purity Test is a 100-question survey that assesses the participants' supposed degree of innocence in worldly matters.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. Get anyunlock download torrent serial, a powerful tool that allows you to unlock various iOS devices, bypass screen passcodes, and recover lost passwords effortlessly.

    ReplyDelete