HomeОбразованиеRelated VideosMore From: DevTips

CSS Transition (CSS Animations Series Part 1)

5744 ratings | 317056 views
Let's talk about CSS animations. Movement on the web. In this part 1 of the series we talk about css transitions. Animatable CSS Properties: http://oli.jp/2010/css-animatable-properties/ Performant Properties to Animate: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Do you even Jade Bro? https://youtu.be/wzAWI9h3q18 Check out the CodePen: http://codepen.io/devtips/pen/xOdodB/ - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Html code for embedding videos on your blog
Text Comments (582)
Jaylyn Willingham (1 day ago)
had to watch this for class
Roman Károly (1 day ago)
Came from experimental features in Safari on iOS 12😂
Lucas Braga (4 days ago)
hi good video, but in preview presentation you indicate Position, opacity, scale and rotation but is Translate isntead position, good video.
Budi Liauw (11 days ago)
Quality content videos on youtube. Very helpfull ,thanks sir
Raita Sorin (21 days ago)
You are The best in our Planet Trevor !
Siddaramappa n n (26 days ago)
hi i have seen your css animation on scroll series now i cant find the videos can you please upload them
Keytron Quabius (1 month ago)
-- *_would be good for ur modern day 2018 vids_* --- The way you are teaching @3:19 is perfect. Hope to see more examples like that in New vids. Teaching this way for JavaScript and the frameworks could help alot. Alot of bootcamps are on their JS/Jquery stage rn
Tshenolo Rev .Thakadu (1 month ago)
i just wanna hug you you beautiful bearded bald man
Ashwath Prabhu (1 month ago)
I want design website instructor. For eg. when we create an new account in codepen an arrow mark comes and it says this button is to create new pen stuff like that. Please help me
yassine mihoubi (1 month ago)
thank you it was useful
Danil Klimov (1 month ago)
Daniel Lee (1 month ago)
Thanks for this!
Umut Emre (2 months ago)
why you don't use " ; "
Paul Valach (2 months ago)
I come to learn the code... the fact you love something called JADE is irrelevant and that YOU don't want to to something for me?? Show the code so we can all see what it is. WORST VIDEO ON THE NET in teaching..
Kevin Cho (2 months ago)
Thank you for sharing this informative video! 😺🖐
Web Guru (2 months ago)
what a style of yours of speaking? love it.
Tarren Hassman (2 months ago)
position: left,right,absolute, relative could be animated if the browser calculated the coordinate position of all the elements after the change occurs and then applies a movement(translation) transformation to all the affected elements.
Kawsar Hossain (2 months ago)
How the matrix3d works in the css If you to make a tutorial in detail, we would have benefited. actually I don't really get any tutorials that are available for the purpose. I want to know whats formate of matrix3d . thank you
MegaLooters (3 months ago)
i will never see CSS same after ur video ! thnks
TJ Walker (3 months ago)
Jade hasn't been named such for years —since well before this vid was posted; it's name is Pug.
john partridge (3 months ago)
Ahhhh.... I had the jittering problem on my webpage (I'm flipping cards) and now I know to place the hover transform on the container. :-) Thank you! -Many blessings. I learned something today.
Noblauch Nobi-Knobi (4 months ago)
17:17 - oh my god. this is the moment me and the universe was one. Now I understand!! Thanks!
孙长青 (5 months ago)
OMG,this really help!thank you !!
Nur Jaya (5 months ago)
how to write jade code in php or how to write php code in jade
D (5 months ago)
Hot man!
UnboundedTc. Tv (6 months ago)
Does transition work for the property, border radius?
TravelTeleport (6 months ago)
You should show the pure css more
Michy Scholar (6 months ago)
The best teacher ever.
Arjun Marasini (6 months ago)
Doesn't work for me!!
Ahmed Shendy (6 months ago)
Beautiful .. really :)
Shahab Eskandary (7 months ago)
your perfect dude , your presentation just attract me so much and your ability to speak english and make the audience to understand all of the parts of the subject, my english sucks but i understood you very well thanks a lot for making this perfect video for free best regards
Chris Susi (7 months ago)
This was a great explanation. I especially like how you started with best practices and use cases.
Ana Angelika Natividad (7 months ago)
thank you so much
Zubair Khan (8 months ago)
Dive in css animation..
Adrià Asdfasdf (8 months ago)
The whole video could be compressed in ten minutes or less. Kinda unfortunate one has to watch for half an hour. Still a good video nonetheless.
Adrian C Black (8 months ago)
Dude ... you're talking about CSS ... then use CSS ... or don't and call it Animations with SASS ... or maybe the goal of this video is 200K+ views on your codepen? This is a comment as a teacher, not a coder fanboy of pure css ... just so you know. You're teaching something ... use that something
Ozzy 182 (3 days ago)
He did that because it's the same thing.
Robert Foster (3 months ago)
Thats true, I was asking myself, why he was using Sass when the video says CSS. It makes it a bit hard to learn the proper way of coding css when people have sass doing everything for them. im a brand new coder and I was a bit confused by this.
Michael Angular (8 months ago)
you're my css hero
Tunny Bencher (8 months ago)
How to animate multiple divs Means two boxes at same time should move?
Alapan Roy (9 months ago)
Troy Lewis (9 months ago)
I like your tuts but it would be better without jade so I can easily correct my syntax so I dont Jade. seems a bit strange to use it in a tutorial
WhyNotEveryThing (10 months ago)
How to get 100vh height and 100vw width just by using scale.
Shmighty (10 months ago)
Simple, clean, and easy to understand. Thank you for the great work!
Bentley Kennedy-Stone (10 months ago)
I thought this was an animated video for Counter Strike Source
gidzya (10 months ago)
amazingly smart and funny :)
Lorenzo White (10 months ago)
How does one use Jade in codepen? I don't see an option for it.
Shanker M (11 months ago)
my well spent 30 mins.
Sameer Giri (11 months ago)
dude you're awesome!
mohasin hossain (11 months ago)
i like your code. thanks, very useful video again. would you mind telling me the name of this code editor.
Sophia (11 months ago)
You are a great teacher!
Razvan Zamfir (1 year ago)
How about margin, would you animate it?
Alan Reis (1 year ago)
Thank u . I love your videos!
Alan Reis (1 year ago)
What is that software?
Ana G (1 year ago)
Thank you!
Hitesh Kumar (1 year ago)
what presentation and editing software you used?
NotADronePilot (1 year ago)
Skip to 11:00, you're welcome.
Shao Ethan (1 year ago)
Awesome dude👍
Benjamin Cornforth (1 year ago)
Travis you are a bit like keemstar.. but you are a decent guy, make really good videos and actually contribute to something meaningful. Thamks man x
Narendra Tiwari (1 year ago)
your videos are too slow means takes too much to time to explaining something
Abhaya Uprety (1 year ago)
dude too much talking
Kaíque Zimerer (1 year ago)
Great video! 🙋
Luke Minall (1 year ago)
That onClick function is jQuery, not JS man. Should put an annotation on the video before it confuses more people.
Luke Minall (1 year ago)
Tran-sition. did you love it? Did you hate it? What did you rate it?... never mind.
funnyfoodguy (1 year ago)
You sound almost just like Tom Segura. Best tutorials I've seen on here. Keep up the good work.
bhavana podilapu (1 year ago)
button.B-a2:hover { display: inline-block; width: 190px; height: 70px; background-color: transparent; border: 5px solid white; margin: 60px 100px; position: absolute; animation: myframes 2s ease-in-out 0s; } @keyframes myframes { 0% { height: 00px; color: crimson; background-color: black; } 100% { height: 70px; color: black; background-color: black; clear: both; } } trying to get animation effect in a button....but i am successfull at complete level...could u help me please!
Please help me out and correct this code to fade in and out one image at a time When i open the file the image fade in and out all of the images at once ---------------------------------code-------------------------------------------------------------- <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides w3-animate-fading" src="images/investyourFuture.png" style="width:100%"> <img class="mySlides w3-animate-fading" src="images/credit_tips.png" style="width:100%"> </div> <script> var myIndex = 0; carouse1(); function carouse() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; 1 < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carouse1, 9000); } </script> </body> </html> ---------------------------------------------------------------------------------------------------------
TheLoGgIDK (1 year ago)
Super useful Love to watch your vids, hope there comes more ;D
take my thumbs up! https://s-media-cache-ak0.pinimg.com/736x/b6/ef/05/b6ef05717d1b7c3fc25ba0fa06cb6268--humor-memes-funny-memes.jpg
ramesh kr (1 year ago)
good job
Rotbart1337 (1 year ago)
What program you use to create those awesome slides?
Ali Ghali (1 year ago)
really nice, still the great challenge is to align elements, so how choose which element goes under or over which?
SHIPOTLE (1 year ago)
What program did you use to make your backgroubd presentation?
SHIPOTLE (1 year ago)
Oh, it's Keynote.
Vietnam (1 year ago)
csiri (1 year ago)
this is like if I made a math channel and explain 1+1 in a 30 minute video...
James kobe (1 year ago)
Is it possible to trigger a Parent of an element with the hover: ? It doesn't seem to work for me . thanks
SQLite Android ORM (1 year ago)
Great tutorial. Thank you.
kdreamix Mak (1 year ago)
How do you make these slides ?
clueple c (1 year ago)
Just wanna say big thanks to you ... just learned that the free Shotcut video editor supports html overlay (I started noticing how powerful it is by just using the marquee tool to insert scrolling text to my video) Then, I saw your video on CSS keyframes ... Thinking of creating a highlight effect with pan & zoom using CSS Thanks again... subbed
Susana Machado (1 year ago)
Nice I already subscribed!
charnpreet singh (1 year ago)
how to used on scrolling time animation css
Sgt. Amazing Name (1 year ago)
Urgh I need a video of someone very simply applying a few different animations effects using html, css, and JS... Like it is very abstract and surprisingly difficult to grasp from text examples alone, I just want to see someone apply some effects with some nice mellow background music in the video and very plain, practical simple language... There is a niche for it I'm sure.
Chris Scott (1 year ago)
Awesome video, love the simplicity!
sandy chowdary (1 year ago)
thnk u bro for your channel
Penguin Arts (1 year ago)
Sophea Soeng (1 year ago)
Thank for sharing.
A1ProductSource (1 year ago)
can you have a trigger on click without javascript just CSS?
Alisher Makhmudov (1 year ago)
hi Travis, could you tell how you've made those slides changing while demonstrating theory, different slides with different background, what tools you've used, is that power point? I've seen how Carlos used Adobe XD for his design notes, but i assume in Adobe XD there is no possibility of moving text blocks one after another while slides change how u did...
Vibhore Jain (1 year ago)
You are a genius , thanks for uploading :D
teatime90 (1 year ago)
recommend using a tool to generate this sort of code :)
jiachin pang (1 year ago)
May i know what code editor is this?
Matthew Bidewell (1 year ago)
FYI watchers! Travis is using JQuery libary, make sure you import it if you're trying to mimic this pen.
TryHxrder o0o (1 year ago)
awesome tutorials
Jaya surya (1 year ago)
wow. .. man that's a clean tutorial. it's really helpful .. thanxx :-)
Man you are the best!!! Keep going, you are talented as a teacher!!!!! Thank you!
James Molenaar (1 year ago)
Thanks for the videos, they help!
Theodore (1 year ago)
Way well explained! And you went for the little tricks and gotchas and best practices.. thanks for doing this!!
Furat Alsheikh (1 year ago)
What program do you use?
skateboarderlucc (1 year ago)
well fuck if this video taught me anything its that sass is the way to go holy shit
yi wang (1 year ago)
the color you use, is so great, you have learnt art right?
Melody K (1 year ago)
Thank you so mush for this share.
Edon Freiner (1 year ago)
Hey Travis, amazing videos. I learn a lot from you. I was wondering what text editor do you use. I know you used to use Atom, but it seems like you switched. Maybe you used this and now you switched to atom, who knows. Also is that live update on the screen part of the text editor or is that Jekyll? Thanks!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.