The logic behind transitions is simple yet powerful. We can instruct the browser to create an animation between two different property values. That's it! We can use the
transition
property to specify that when a change occurs in another CSS property (for example, width
), the element should not switch from one value to the other instantaneously but take a desired amount of time, thus creating an animation between the two values. The following example illustrates this effect:
<!doctype html> <html> <head> <title>basic animation</title> <style> a{ display: block; width: 300px; line-height: 100px; height: 100px; text-align: center; font-size: 50px; font-family: sans-serif; font-weight: bold; color: black; border: 10px solid black; text-decoration: none; transition: all 1s; -ms-transition: all 1s; } a:hover{...