Animating with CSS Transitions - A look at the transition properties
Animation on the web is an awesome way to both catch a users attention and to help improve the user experience when it is used correctly. The easiest way to add animation to your website is by using transitions, which we'll look at in this tutorial.
In this video, I explore the four different transition properties, seeing what they do, and how to use them:
transition-duration
transition-property
transition-timing-function
transition-delay
Codepen from this video: https://codepen.io/kevinpowell/pen/ff...
As well as the shorthand 'transition' property, which allows us to combine all of the above into a single property, making life a lot easier.
I also talk a little bit about best practice, in that you want to try to focus on using your transitions on opacity and transform, and that's about it. If you'd like a MUCH more in-depth exploration of this: https://www.smashingmagazine.com/2016...
---
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Смотрите видео Animating with CSS Transitions - A look at the transition properties онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Kevin Powell 17 Январь 2018, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 561,271 раз и оно понравилось 16 тысяч людям.