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

93 comments:

  1. Replies
    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training

      Delete
  2. 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
  3. You are providing a post is very useful for develop my knowledge and I learn more info from your blog.
    Digital Marketing Course In Kolkata
    Web Design Course In Kolkata
    SEO Course In Kolkata

    ReplyDelete
  4. Nice! you are sharing such helpful and easy to understandable blog. i have no words for say i just say thanks because it is helpful for me.



    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery





    ReplyDelete
  5. I was following your blog regularly and this one is very interesting and knowledge attaining. Great effort ahead. you can also reach us for web development company in chennai website design company in chennai

    ReplyDelete
  6. Freelance maintenance technicians also benefit from establishing relationships with multiple clients. Working as a freelancer, you’ll gain employment experience with a variety of businesses, boosting your overall skill set and providing you with more work opportunities in the future.

    maintenance technician

    ReplyDelete
  7. 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
  8. Excellent blog thanks for sharing the valuable information..it becomes easy to read and easily understand the information.
    Useful article which was very helpful. also interesting and contains good information.
    to know about python training course , use the below link.

    Python Training in chennai

    Python Course in chennai

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

    ReplyDelete
  10. Managed Network Services gives you access to a wider pool of experts to help manage your growing business network needs. It provides proactive support to ensure issues are fixed in a timely manner and offers improved IT security to help protect your customers and employees. It also simplifies your cost management, resulting in a more productive and cost-effective business.

    ReplyDelete
  11. Managed Network Services gives you access to a wider pool of experts to help manage your growing business network needs. It provides proactive support to ensure issues are fixed in a timely manner and offers improved IT security to help protect your customers and employees. It also simplifies your cost management, resulting in a more productive and cost-effective business.

    ReplyDelete
  12. 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
  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.
    AWS certification course in Chennai

    ReplyDelete
  14. 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
  15. toptan iç giyim tercih etmenizin sebebi kaliteyi ucuza satın alabilmektir. Ürünler yine orjinaldir ve size sorun yaşatmaz. Yine de bilinen tekstil markalarını tercih etmelisiniz.

    Digitürk başvuru güncel adresine hoşgeldiniz. Hemen başvuru yaparsanız anında kurulum yapmaktayız.

    tutku iç giyim Türkiye'nin önde gelen iç giyim markalarından birisi olmasının yanı sıra en çok satan markalardan birisidir. Ürünleri hem çok kalitelidir hem de pamuk kullanımı daha fazladır.

    nbb sütyen hem kaliteli hem de uygun fiyatlı sütyenler üretmektedir. Sütyene ek olarak sütyen takımı ve jartiyer gibi ürünleri de mevcuttur. Özellikle Avrupa ve Orta Doğu'da çokça tercih edilmektedir.

    yeni inci sütyen kaliteyi ucuz olarak sizlere ulaştırmaktadır. Çok çeşitli sütyen varyantları mevcuttur. iç giyime damga vuran markalardan biridir ve genellikle Avrupa'da ismi sıklıkla duyulur.

    iç giyim ürünlerine her zaman dikkat etmemiz gerekmektedir. Üretimde kullanılan malzemelerin kullanım oranları, kumaşın esnekliği, çekmezlik testi gibi birçok unsuru aynı anda değerlendirerek seçim yapmalıyız.

    iç giyim bayanların erkeklere göre daha dikkatli oldukları bir alandır. Erkeklere göre daha özenli ve daha seçici davranırlar. Biliyorlar ki iç giyimde kullandıkları şeyler kafalarındaki ve ruhlarındaki özellikleri dışa vururlar.

    ReplyDelete
  16. 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
  17. 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
  18. 최근 많은 업체들은 마틴이나 양방에 대한 핑계로 당첨이 되었음에도 보유금액을 몰수하는 비양심적인 곳들이 많습니다. 하지만 저희가 추천하는 파워볼사이트 는 어떠한 제재도 없으며 안전합니다.

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

    ReplyDelete
  20. I really enjoyed reading this fantastic blog.. Foreign travelers who wish to travel to Azerbaijan need to apply for e visa to Azerbaijan online that provide the fast and secure visa services.

    ReplyDelete
  21. I wish more authors of this type of content would take the time you did to research and write so well. I am very impressed with your vision and insight 토토

    ReplyDelete
  22. 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
  23. 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
  24. I have to thank you for the efforts you have put in penning this blog. I really hope to view the same high-grade content by you in the future as well. In fact, your creative writing abilities has inspired me to get my very own blog now 토토사이트

    ReplyDelete
  25. 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
  26. If you are looking for a hangover relief drink, you know what some of the less-than-pleasant, morning-after consequences can be. WHEN is a full spectrum of vitamins and herbs that support mental health, digestion, cardiovascular, immune, hormonal and respiratory systems.

    ReplyDelete
  27. 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
  28. 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
  29. 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
  30. I am browsing this website daily and get good facts from here all the time. Aw, this was a really nice post. Kenya welcomes foreigners to the country for various purposes. Obtaining a Kenyan visa is quite convenient and reading about Kenyan visa invitation letter.

    ReplyDelete
  31. 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
  32. This very informative and interesting blog. I have read many blog in days but your writing style is very unique and understanding. If you have read my articles then click below.

    web design company
    website designer near me
    web development company

    ReplyDelete
  33. Thanks for such a valuable post. I am waiting for your next post, I have enjoyed a lot reading this post keep it up.
    스포츠토토

    ReplyDelete
  34. I will recommend your website to everyone. You have a very good gloss. Write more high-quality articles. I support you.
    카지노사이트

    ReplyDelete
  35. I love to read this, thank you... apply for Indian tourist visa online is easy. You can apply online completely securely through eVisa Indian website.

    ReplyDelete
  36. You made some good points there. I did a Google search about the topic and found most people will believe your blog. kèo nhà cái

    ReplyDelete
  37. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future. 토토사이트추천

    ReplyDelete
  38. Do you like the kind of articles related to 메이저놀이터 If someone asks, they'll say they like related articles like yours. I think the same thing. Related articles are you the best.

    ReplyDelete
  39. wavy bar mushrooms are one of the newest trends on store shelves. They are also the latest threat to the chocolate lovers who do not have time enough to eat a standard chocolate bar. However, there is another group of people who love wavy chocolate. They are people who have to make sure that their products are safe. They are food scientists.

    ReplyDelete
  40. 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
  41. Wow, that's what I was looking for, what stuff! Present here on this website, thanks to the admin of this website.. how can i get Turkish visa? You can apply Turkish visa online through the e Visa Turkey website.It takes 3-5 minutes to fill in the online application.

    ReplyDelete
  42. 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
  43. Captivating post. I Have Been contemplating about this issue, so an obligation of appreciation is all together to post. Completely cool post.It 's greatly extraordinarily OK and Useful post.Thanks 사설토토사이트

    ReplyDelete
  44. This is one of the best posts I’ve read. It contains some very valuable and helpful information. Thanks for sharing. Willy Wonka Coat

    ReplyDelete
  45. 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
  46. 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
  47. 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
  48. quite nice say. I just stumbled upon your weblog and wanted to publicize that i've without a doubt enjoyed browsing your weblog posts. After every sick be subscribing on your feed and that i dream you write inside the same manner as again quickly! https://crackdj.com/avast-secureline-vpn-license-key/

    ReplyDelete
  49. attractive, notice. I simply stumbled upon your blog and wanted to proclaim that i've appreciated browsing your weblog posts. After every one in all proportion of share of, i can really subscribe to your feed, and that i goal you may write once more quickly! https://cyberspc.com/spyhunter-5-crack-download-key-mac/

    ReplyDelete
  50. 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
  51. Your post is very helpful and information is reliable. I am satisfied with your post. Thank you so much for sharing this wonderful post. If you have any assignment requirement then you are at the right place. 메이저사이트

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

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

    ReplyDelete
  55. You made some good points there. I did a Google search about the topic and found most people will believe your blog. 먹튀검증

    ReplyDelete
  56. Great beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog website?
    The account helped me a acceptable deal. I had been a little bit acquainted of
    this your broadcast offered bright clear concept
    english stories english short stories with moral value What is the factorial of 100


    ReplyDelete
  57. 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
  58. 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
  59. I am very happy to see this excellent blog with us.
    Idm Crack

    ReplyDelete
  60. 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

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

    ReplyDelete
  63. Excellent post it is very helpful and knowledgeable content good work keep it up. เว็บตรงไม่ผ่านตัวแทน

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

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

    ReplyDelete