|
| 1 | +# CSS Transitions |
| 2 | + |
| 3 | +## Introduction |
| 4 | +CSS transitions provide a way to control the speed of animation changes to CSS properties. This can enhance the user experience by making the changes appear smooth and visually appealing. |
| 5 | + |
| 6 | +## Basic Concepts |
| 7 | + |
| 8 | +### What is a Transition? |
| 9 | +A transition is a way to animate a property change over a given duration. |
| 10 | + |
| 11 | +```css |
| 12 | +.element { |
| 13 | + transition: property duration timing-function delay; |
| 14 | +} |
| 15 | +``` |
| 16 | +## Transition Properties |
| 17 | +### transition-property |
| 18 | + |
| 19 | +Specifies the name of the CSS property the transition effect is for. |
| 20 | +Example: width, height, background-color, etc |
| 21 | + |
| 22 | +```css |
| 23 | +.element { |
| 24 | + transition-property: background-color; |
| 25 | +} |
| 26 | +``` |
| 27 | + |
| 28 | +### transition-duration |
| 29 | + |
| 30 | +Specifies the duration over which the transition should occur. |
| 31 | +Example: 1s, 200ms, etc |
| 32 | + |
| 33 | +```css |
| 34 | +.element { |
| 35 | + transition-duration: 1s; |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +### transition-timing-function |
| 40 | + |
| 41 | +Specifies the speed curve of the transition effect. |
| 42 | +Example: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) |
| 43 | + |
| 44 | +```css |
| 45 | +.element { |
| 46 | + transition-timing-function: ease-in-out; |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +### transition-delay |
| 51 | + |
| 52 | +Specifies when the transition effect will start. |
| 53 | +Example: 0s, 1s, etc. |
| 54 | + |
| 55 | +```css |
| 56 | +.element { |
| 57 | + transition-delay: 0.5s; |
| 58 | +} |
| 59 | +``` |
| 60 | + |
| 61 | + |
| 62 | +## Shorthand Property |
| 63 | +You can combine all the individual transition properties into one shorthand property. |
| 64 | + |
| 65 | +```css |
| 66 | +.element { |
| 67 | + transition: background-color 1s ease-in-out 0.5s; |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +# Basic Transition |
| 72 | +```html |
| 73 | +<!DOCTYPE html> |
| 74 | +<html lang="en"> |
| 75 | +<head> |
| 76 | + <meta charset="UTF-8"> |
| 77 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 78 | + <style> |
| 79 | + .box { |
| 80 | + width: 100px; |
| 81 | + height: 100px; |
| 82 | + background-color: blue; |
| 83 | + transition: background-color 1s ease; |
| 84 | + } |
| 85 | + .box:hover { |
| 86 | + background-color: red; |
| 87 | + } |
| 88 | + </style> |
| 89 | +</head> |
| 90 | +<body> |
| 91 | + <div class="box"></div> |
| 92 | +</body> |
| 93 | +</html> |
| 94 | +``` |
| 95 | + |
| 96 | +# Transition Multiple Properties |
| 97 | + |
| 98 | +```html |
| 99 | +<!DOCTYPE html> |
| 100 | +<html lang="en"> |
| 101 | +<head> |
| 102 | + <meta charset="UTF-8"> |
| 103 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 104 | + <style> |
| 105 | + .box { |
| 106 | + width: 100px; |
| 107 | + height: 100px; |
| 108 | + background-color: blue; |
| 109 | + margin: 50px; |
| 110 | + transition: width 2s, height 2s, transform 2s; |
| 111 | + } |
| 112 | + .box:hover { |
| 113 | + width: 200px; |
| 114 | + height: 200px; |
| 115 | + transform: rotate(45deg); |
| 116 | + } |
| 117 | + </style> |
| 118 | +</head> |
| 119 | +<body> |
| 120 | + <div class="box"></div> |
| 121 | +</body> |
| 122 | +</html> |
| 123 | +``` |
| 124 | + |
| 125 | +# Delayed Transition |
| 126 | +```html |
| 127 | +<!DOCTYPE html> |
| 128 | +<html lang="en"> |
| 129 | +<head> |
| 130 | + <meta charset="UTF-8"> |
| 131 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 132 | + <style> |
| 133 | + .box { |
| 134 | + width: 100px; |
| 135 | + height: 100px; |
| 136 | + background-color: blue; |
| 137 | + transition: background-color 1s ease 2s; /* Delay of 2s */ |
| 138 | + } |
| 139 | + .box:hover { |
| 140 | + background-color: red; |
| 141 | + } |
| 142 | + </style> |
| 143 | +</head> |
| 144 | +<body> |
| 145 | + <div class="box"></div> |
| 146 | +</body> |
| 147 | +</html> |
| 148 | +``` |
| 149 | + |
| 150 | +# Conclusion |
| 151 | +CSS transitions provide a simple way to create smooth animations and improve the user experience. By using the various transition properties, you can control the timing, speed, and behavior of your animations to create visually appealing effects. |
| 152 | + |
| 153 | +```bash |
| 154 | + |
| 155 | +This guide covers the essential properties, concepts, and examples to help users understand and apply CSS transitions in their projects. |
| 156 | +``` |
0 commit comments