Companies Home Search Profile

Creative CSS Animations, Transitions and Transforms Course [Updated for 2021]

Focused View

Ahmed Sadek

7:37:52

18 View
  • 01.01-introduction.mp4
    02:59
  • 01.02-what is css transitions.mp4
    03:08
  • 01.03-transitions options.mp4
    06:00
  • 01.04-different ways to write the transition property.mp4
    05:45
  • 01.05-what properties can be transitioned.mp4
    01:54
  • 02.01-2d transforms basics.mp4
    01:37
  • 02.02-translate function.mp4
    04:56
  • 02.03-scale function.mp4
    03:42
  • 02.04-rotate function.mp4
    02:45
  • 02.05-skew function.mp4
    02:17
  • 02.06-transform origin.mp4
    06:24
  • 03.01-translate in 3d.mp4
    05:35
  • 03.02-rotate in 3d.mp4
    03:03
  • 04.01-overview.mp4
    02:49
  • 04.02-creative button hover effect 1.mp4
    06:48
  • 04.03-creative button hover effect 2.mp4
    07:44
  • 04.04-creative button hover effect 3.mp4
    06:16
  • 04.05-creative button hover effect 4.mp4
    02:31
  • 04.06-creative button hover effect 5.mp4
    02:44
  • 04.07-creative button hover effect 6.mp4
    05:10
  • 04.08-creative button hover effect 7.mp4
    05:38
  • 04.09-creative button hover effect 8.mp4
    05:09
  • 04.10-creative button hover effect 9.mp4
    07:14
  • 04.11-creative button hover effect 10.mp4
    06:22
  • 04.12-creative button hover effect 11.mp4
    07:28
  • 04.13-creative button hover effect 12.mp4
    14:31
  • 04.14-creative button hover effect 13.mp4
    07:56
  • 04.15-creative button hover effect 14.mp4
    13:29
  • 04.16-creative button hover effect 15.mp4
    11:13
  • 04.17-creative button hover effect 16.mp4
    06:57
  • 04.18-creative button hover effect 17.mp4
    07:22
  • 04.19-creative button hover effect 18.mp4
    08:46
  • 04.20-creative button hover effect 19.mp4
    09:12
  • 04.21-creative button hover effect 20.mp4
    08:21
  • 04.22-image hover effect with css transforms 1.mp4
    08:07
  • 04.23-image hover effect with css transforms 2.mp4
    03:48
  • 04.24-image hover effect with css transforms 3.mp4
    02:35
  • 04.25-image hover effect with css transforms 4.mp4
    02:28
  • 04.26-image hover effect with css transforms 5.mp4
    12:23
  • 04.27-image hover effect with css transforms 6.mp4
    02:26
  • 04.28-creative menu hover effect with css transforms 1.mp4
    05:39
  • 04.29-creative menu hover effect with css transforms 2.mp4
    09:45
  • 04.30-creative menu hover effect with css transforms 3.mp4
    09:58
  • 04.31-creative menu hover effect with css transforms 4.mp4
    06:58
  • 04.32-smoky text effect using css transforms.mp4
    05:03
  • 04.33-fill text effect on hover.mp4
    03:20
  • 04.34-social media icons hover effect with css transforms.mp4
    09:50
  • 05.01-animation introduction.mp4
    03:31
  • 05.02-create css animations with more stages.mp4
    04:55
  • 05.03-animation fill mode property.mp4
    06:23
  • 05.04-animation iteration count property.mp4
    03:43
  • 05.05-animation direction property.mp4
    02:57
  • 05.06-animation shorthand method.mp4
    01:46
  • 06.01-overview.mp4
    01:11
  • 06.02-floating text using css animation.mp4
    03:45
  • 06.03-loading effect using css animation.mp4
    04:14
  • 06.04-driving a car and a motorbike using css animation.mp4
    04:56
  • 06.05-text rotator using css animation.mp4
    02:41
  • 06.06-animated image pattern using css animation.mp4
    03:46
  • 06.07-button shaking hover effect with css animation.mp4
    03:54
  • 06.08-animated button with css animation.mp4
    06:49
  • 06.09-lighting text with css animation.mp4
    05:20
  • 06.10-heartbeat with css animation.mp4
    07:11
  • 06.11-animated text background with css animation.mp4
    02:54
  • 06.12-bouncing balls with css animation.mp4
    06:28
  • 06.13-rain effect with css animation.mp4
    03:13
  • 06.14-icon hover effects with css animation.mp4
    08:21
  • 06.15-loading text animation.mp4
    06:51
  • 06.16-awesome pulse effect using css animation.mp4
    06:35
  • 06.17-simple images slider show with css animation.mp4
    02:39
  • 06.18-changing background color with css animation.mp4
    04:28
  • 06.19-newtons cradle with css animation.mp4
    10:24
  • 06.20-nice loading effect with css animation 1.mp4
    09:49
  • 06.21-nice loading effect with css animation 2.mp4
    05:28
  • 06.22-nice loading effect with css animation 3.mp4
    04:10
  • 06.23-nice loading effect with css animation 4.mp4
    05:58
  • 06.24-nice loading effect with css animation 5.mp4
    06:06
  • 06.25-nice loading effect with css animation 6.mp4
    06:16
  • 06.26-nice loading effect with css animation 7.mp4
    08:39
  • 06.27-nice loading effect with css animation 8.mp4
    06:26
  • 9781801071055 Code.zip
  • Description


    With an ever-increasing number of commercial companies having a web presence, the importance of user experience has never been more paramount. Knowing and implementing CSS is thus a key tool in any front-end or web developer’s toolkit. Starting from scratch, this course will help you master CSS animations, transitions, and transforms. The course starts with the CSS transition property, which is key to infusing life into any HTML webpage. The course then progresses to teach you how to implement CSS transforms, which is key to performing tasks such as moving elements around the page, scaling and rotating elements, and so on. The course then teaches you about transform functions that we can use in 2D and 3D environments. The final section of this course is dedicated to CSS Animation Creative Examples. Here, you will learn and implement various text animation effects such as floating, loading, and animated text. You will also create interesting animations such as driving a car and motorbike. Additionally, by implementing the concepts taught earlier in the course, you will also implement a Newton’s Cradle animation. By the end of this course, you will create over 80 projects of varying complexities and will be equipped with essential CSS tools. The code files and all the required files are uploaded on GitHub at https://github.com/PacktPublishing/Creative-CSS-Animations-Transitions-and-Transforms-Course-Updated-for-2021-

    More details


    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Ahmed Sadek is a senior web developer working as a freelancer for the last 7 years. He has developed hundreds of web projects and helped companies of all sizes in improving their business.
    Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.
    • language english
    • Training sessions 80
    • duration 7:37:52
    • Release Date 2024/03/16