 Hai, semua. Terima kasih. Tiga bulan lalu, saya membuat keputusan untuk mengubah kerja. Sebab itulah saya mencari GA untuk perkembangan web emasif. Sebelum hari kedua, Huijing kembali untuk bekerja dengan kami. Selepas berjumpa, saya sangat menginsipkan kerja yang saya buat. Saya membuat sesuatu yang saya mencari bahawa ia menarik untuk melihat bahawa ia juga adalah sebuah tool yang baik untuk mengajar tentang animasi CSS. Jadi, okey. Jadi, kenapa... Huijing sebenarnya menjelaskan sedikit. Kenapa kita mahu buat animasi CSS? Satu adalah... Okey, saya tak tahu. Jadi, tak perlu menggunakan javascript. Itu membuat hidupnya lebih mudah. Tak perlu membuat animasi windows.request, kemudian memperbaikkan setiap javascript untuk memperbaikkan javascript pada setiap javascript. Kemudian... ia juga jibu-hender, les jeng. Saya minta maaf. Saya rasa saya melihat. Tiada masalah. Ia keadaan salah. Kita masih gembira. Javascript dan javascript. Oh, tidak. Saya fikir 3 javascript memperbaikkan setiap javascript pada setiap javascript. Ya. Jadi, okey. Jangan lupa bahawa jangka-jangka-jangka-jangka-jangka dengan mengenai javascript CSS, animasi ini boleh membantu anda. Saya akan menunjukkan itu. Saya akan menunjukkan itu kepada anda nanti. Jadi, pertama, jangka-jangka-jangka, jangka-jangka-jangka, animasi yang dapat mengajar. Ini... Ya, anda dapat lihat, masih sedikit javascript. Sebenarnya, anda akan fikir bahawa ada banyak javascript dalam ini. Tapi jika anda melihat javascript, tidak ada javascript dalamnya. Tak ada javascript. Ia semua di... Saya melihat javascript. Janganlah. Janganlah. Janganlah. Ia... Semua javascript adalah pada javascript dengan menggunakan animasi dan... animasi dan... kejutan. Bagaimana untuk menggunakan javascript? Dua javascript hanya ada dua javascript. Sangat mudah. Janganlah. Saya ingin mengajar bagaimana untuk menggunakan javascript dan kejutan javascript. Ia adalah sesuatu yang mudah. Mereka menggunakan animasi semasa ia lebih mudah untuk menggunakan javascript. Jadi javascript adalah... jika anda melihat javascript dan lupa. Saya ingin menunjukkan javascript. Jadi apabila saya melihat javascript dan lupa, jika anda melihat javascript, jika saya tidak melihat javascript, apa yang akan berlaku? Janganlah. Tiada apa-apa yang akan berlaku. Bila anda melihat javascript, anda tidak boleh mengawal lagi. Bila anda hanya kembali ke pukul nanti yang anda mengubah untuknya. Walaupun untuk animasi, jika javascript berlupa, anda juga tidak perlu melihat javascript. Bila anda mengubah javascript, jika anda melihat javascript atau sesuatu. Jika anda melihat javascript atau sesuatu. Prinsipa kejutan adalah menggantung kejutan. Jika saya melihat javascript, pukul nanti, javascript animasi akan menghantar semua kejutan yang sepatutnya berlaku. Jadi jika anda tidak akan pergi ke mana-mana pun, anda akan hanya pergi ke pukul nanti dari pukul nanti ke pukul nanti. Walaupun animasi berlaku untuk menggantung apa yang kita nampak kejutan dalam termasuk javascript animasi, ia dipanggil kiframes. Saya akan jelaskannya nanti. Untuk kejutan, jika anda menggantung kejutan, jika anda menggantung kejutan, jika anda menggantung kejutan kejutan itu, apa yang anda perlu lakukan adalah menggantungnya. Jadi bagaimana menggantungnya? Adakah anda menggantung javascript? Menggantung kejutan yang baru. Element.style. Dalam CSS, anda tidak perlu menggantung javascript. Anda juga boleh menggantung semua kejutan seperti hover, check, valid atau apa-apa. Sebenarnya, jika anda boleh menggantung javascript dan CSS, anda boleh menggantung kejutan. Kenapa ini javascript? Sebab anda tidak perlu menggantung javascript.1, javascript.2, javascript.3. Anda hanya menggantung kejutan yang baru dengan semua kejutan yang anda inginkan, dan setiap kejutan itu ini adalah bagaimana saya menggantung javascript saya. Jadi, javascript sebagai javascript, tidak berdasarkan javascript, tetapi anda dapat menggantung semua kejutan yang digantung javascript.1. Javascript ini juga menggantung javascript.1. Javascript javascript, javascript.1. Anda sama ada yangンダホ cinta ya, anda boleh menggantung javascript dan javascript perasaan. Menyewatkan javascript pada javascript 1. Jika anda menggantung javascript 1 lool baik betul, pun, saya akan jatuh ianya tu. javascript 125 strategies 16 Baskur Enter EntahJared anda boleh meluat , stores, erasangan, idea adalah ia akan membuat anda lakukan perkara yang akan dihubungi jadi, ada banyak perkara yang sangat baik yang paling di luar sana animasi yang ini sedikit keras, tapi mari kita cuba lagi yang ini bukan bagi 3? iya, banyak bagi ini banyak bagi grafis juga okey, saya rasa saya telah menunjukkan salah satu ini cukup lembaga betul, saya rasa ini satu lembaga sebenarnya, saya sepatutnya menunjukkan ini okey ia bermaksud ia bermaksud ia keluar dengan lembaga ia keluar dengan lembaga ia keluar dengan lembaga jadi, setidaknya anda dapat idea apabila anda menggunakan yang ini, sebenarnya anda tidak perlu melakukan banyak perkara jadi, okey jadi, apabila kadang-kadang kita mahu animasi lebih daripada satu perkara okey untuk grafis yang penting okey, okey grafis yang penting, anda dapat menggunakan beberapa perkara dalam grafis yang penting untuk transisi anda harus memasukkan satu transisi dua transisi jadi apabila kita berkata css animasi sebenarnya membantu mengubah performa anda penting adalah untuk melakukan ini anda perlu menggunakan css transform menggunakan css top atau lap atau apa-apa perkara lain tidak akan memberikan anda lebih penting sebaik-baik saja untuk memasukkan manipulasi normal jadi, jika anda mempunyai perkara yang sangat bagus saya akan menggunakan perkara ini jadi, saya tidak akan menutupi tetapi sebenarnya perkara itu apabila randas anda berkumpul ia berkumpul dengan tiga proses dan proses top-mose ia dihubungi oleh GPU dan jika anda hanya menggunakan perkara yang hanya berkumpul anda boleh mengubah menggunakan CPU dan anda akan membuat transisi anda lebih mudah jadi baiklah, saya akan memasukkan ini Bersihkan saya rasa saya akan pergi ke tempat yang menarik yang adalah aplikasi saya baiklah jadi Bersihkan saya akan beritahu bagaimana saya mencapai perkara ini tanpa memasukkan laporan jika anda mempelajari fizikal sebelum anda tahu bahawa randas anda dan randas anda dapat dilahirkan yang benar-benar yang saya cuba berkumpul untuk menggunakan transisi pada perkara yang berlainan dan seperti yang anda lihat, saya sebenarnya sebenarnya mempunyai animasi yang hanya di randas anda yang anda akan memasukkan dan anda hanya memasukkan randas anda dan randas anda untuk membuat keseluruhan dan keseluruhan sementara saya menggunakan transisi lihat transisi di sini transisi di aplikasi di sini untuk mengandalkan randas anda dan randas anda jadi apabila anda memasukkan perkara ini anda anda dapat membuat animasi ini satu perkara yang anda tahu apabila anda menggunakan transisi saya suka memasukkan randas yang lain sebab semua perkara ini anda boleh memasukkan mereka sendiri saya boleh memasukkan transisi saya untuk mendengar untuk randas dan randas tetapi apabila anda memasukkan randas dan randas pada masa yang sama tetapi untuk kekuatakan saya tidak dapat mengajar randas dan randas pada masa yang sama So how do you actually cheat it is actually create a wrapper. That's why I have a wrapper of ball y and a ball x. So one transition is applied on the wrapper and the other one is applied on the ball itself. Then you can actually separate out and apply one of it applied transition as one of it applied transition y. That's one way to do that. So in this example, now come to the Java script part. Because I also want to teach about transition, you also need to touch a bit on transition events. Transition events are callbacks event which you can listen for when the transition end so that you can do certain things like upon transition end. I want to animate some properties or something like that. How do you do that? It's to add an event listener called transition end. And put in whatever listener. In my case, I actually just use a toggle class so that I just need to set one class is my player side. One class is on the computer side. And basically what I just do is just toggle class. So you just go left, go right, go left, go right. And each time I randomize the horizontal sphere. So it will look like it's bouncing very randomly. Basically, since I'm saying that CSS can achieve even without using my Java script. I can actually even do away from Java script. Just use another animation event just to go left and right. But the reason I put Java script out there is so that I can randomize the horizontal speed to make it random. So now I want to cover on performance. When I initially designed this, I actually use top left because back then second week only. Just learn new stuff. So you can see from here also look very smooth. But according to Huijing's eye, it's like, it's very janky compared to transfer. But how to actually prove it? So you can use depth tools to do that. Under depth tools, there's this thing called... Where is it? Timeline. It's how you all check your CSS performance. Under timeline, you all can record. So let's sit down here. I look at pain since I'm only interested in the rendering performance. So let's say finish. This one is the top left one. So you all see actually a lot of the frames exceeded the 60fps. All these red points means it's exceeding the 60fps. So it will result in jank. And there's also a very nice... Okay, let's say I only focus on this 45s. There's a very nice chart down here that I show you how much time is actually spent in rendering. So let's try and compare with translate. So you all can see from here it's already look much better. So let's take this. Let's try and compare apple to apple. So I take 200ms here. Versus... Okay lah, raffi lah. 200ms here. So you see in rendering down here it actually spend 8ms. Versus... So there's a real difference in terms of performance. Depend on laptop, on my laptop jasal I see it's like 3x difference but different. But there's the point I trying to get across which is that use CSS animation plus transform and you'll make your animation much smoother. So, thanks for listening. Thank you. Questions? I have one. I've always got questions. How many frames per second is good in Google's mind? Is it 30 or something? Or what are they aiming for? 60. 60. Show us how much I know about animation. There's a reason for it being 60 being the fact that the average monitor refresh rate is 60fps. So the reason why did animations look janky when you don't hit 60fps is because then the refresh rate and your animation are not in sync. That's what's causing the jagaty look. Are they capped at 60fps then? To keep it in sync? Because I know a lot of games capped at frames per second to try to sync pretty well. It's important to keep it constant rather than variable. That's when if you're playing counter-strike and you're not smooth. So I think it's more of a you want it in sync with your monitor refresh rate at any time.