Creative transitions and animations in CSS
This guide is intended to carry out experiments or exercises with transitions and animations in CSS, applied to buttons, images, texts and more complete HTML elements; we will see the most basic approach to animations in CSS which would be using transitions, we will see multiple examples and limitations that we have when working with the simplest way to achieve animations in CSS which is the use of transitions. In later chapters we will also work with animations, we will learn about their characteristics, possible configurations, options and modes and with this, we will see a more comprehensive approach to achieving animation in CSS.
Goal
Who is this book for
This is a book to experiment with CSS animations, with this we are going to mention the following:
- It is not a book that aims to know 100% CSS animations, if not, in a basic/intermediate way; The objective is to experiment and with this, present different templates that we can use to create all kinds of more complex or simply different animations.
It is assumed that the reader has at least basic knowledge in the use of CSS. - Compared to other books, the approach is mostly hands-on, presenting over 100 experiments to work through and get inspiration for other types of CSS effects.
- To follow this book you need to have a computer running Windows, Linux, or MacOS.
Topics of the book
This book has a total of 5 chapters, it is recommended that you read in the order in which they are arranged and as we explain the experiments carried out, go directly to practice, replicate, test and modify the codes that we show in this book.
- Chapter 1: In this chapter we are going to review geometric transformations, translations and animations in CSS.
- Chapter 2: In this chapter, we are going to create many examples of CSS transitions applied to buttons, in these examples we will mainly apply geometric transformations, but we will also work with other CSS properties.
- Chapter 3: In this chapter, we are going to present different examples of CSS effects with the hover event; that is, we will continue using the CSS transitions as we did in the previous chapter; for these examples, we'll use any kind of HTML structure that won't be buttons like in the previous chapter.
- Chapter 4: In this chapter, we will create various effects using transitions, also, we will see their limitations through several examples that we will analyze in the next chapter using animations to achieve more complete animations.
- Chapter 5: In this chapter, we will present the use of animations, based on examples, we will see its possible variants, configurations and examples using animations and transitions.
In this book, we will see more than 100 complete and functional examples of animating HTML elements, we will start by applying CSS transitions on buttons, texts, among others, to get to the animations in which we will create experiments from scratch, adapt the ones we use with transitions, and we will use the transitions and animations together.
The book is currently in development…
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter