106 | WAIT! 107 | Animate 108 |
109 | 110 |
111 | CSS doesn't provide a property to pause an animation before it loops
112 | around again. Yes, there's
113 | animation-delay
116 | but this simply denotes a delay at the very start of the animation,
117 | when the element is first shown.
118 | WAIT! Animate
119 | calculates updated keyframe percentages given a
120 | wait
121 | time meaning you can insert a delay between each animation iteration
122 | using pure CSS, without JavaScript.
123 |
128 | 129 |
SCSS Mixin
130 | 131 |
132 | @mixin waitAnimate($options: ()) {
133 | $options: map-merge((
134 | animationName: waitAnimate,
135 | duration: 1,
136 | waitTime: 0,
137 | timingFunction: linear,
138 | iterationCount: infinite
139 | ), $options);
140 |
141 | $name: map-get($options, animationName);
142 | $kf: map-get($options, keyframes);
143 | $kfLength: length($kf);
144 | $duration: map-get($options, duration);
145 | $waitTime: map-get($options, waitTime);
146 | $timingFunction: map-get($options, timingFunction);
147 | $iterationCount: map-get($options, iterationCount);
148 | $counter: 1; // index of 'each'
149 |
150 | @keyframes #{$name} {
151 | @each $frame, $prop in $kf {
152 | #{$frame * $duration / ($duration + $waitTime)}% {
153 | @each $k, $v in $prop {
154 | #{$k}: #{$v}
155 | }
156 | }
157 | // if last in loop and waitTime is not 0, add the last frame as 100% (this is what creates the pause)
158 | @if $counter == $kfLength and $waitTime > 0 {
159 | 100% {
160 | @each $k, $v in $prop {
161 | #{$k}: #{$v}
162 | }
163 | }
164 | }
165 | $counter: $counter+1;
166 | }
167 | }
168 |
169 | .#{$name} {
170 | animation: #{$name} #{$duration + $waitTime}s #{$timingFunction} #{$iterationCount};
171 | }
172 | }
173 |
174 |
175 | Include:
178 | 179 |180 | @include waitAnimate( 181 | ( 182 | animationName: animName, 183 | keyframes: ( 184 | 0: ( 185 | transform: scale(1), 186 | background-color: blue 187 | ), 188 | 50: ( 189 | transform: scale(2), 190 | background-color: green 191 | ), 192 | 100: ( 193 | transform: scale(3), 194 | background-color: red 195 | ) 196 | ), 197 | duration: 2, 198 | waitTime: 1, 199 | timingFunction: ease, 200 | iterationCount: infinite 201 | ) 202 | ); 203 |204 |
Output:
208 | 209 |
210 | @keyframes animName {
211 | 0% {
212 | transform: scale(1);
213 | background-color: blue;
214 | }
215 | 33.33333333% {
216 | transform: scale(2);
217 | background-color: green;
218 | }
219 | 66.66666667% {
220 | transform: scale(3);
221 | background-color: red;
222 | }
223 | 100% {
224 | transform: scale(3);
225 | background-color: red;
226 | }
227 | }
228 |
229 | .animName {
230 | animation: animName 2s ease infinite;
231 | }
232 |
233 | 237 | You'll notice that you need to change your keyframes rule to a SASS 238 | map object. I was unable to find a solution that could manipulate a 239 | standard keyframes rule. If you know of a way to do this, please let 240 | me know. 241 |
242 | 243 |
244 | @include waitAnimate((options));
247 |
| Option | 253 |Description | 254 |Type | 255 |Required? | 256 |Default | 257 |
| animationName | 262 |The class name of your animation. | 263 |String | 264 |No | 265 |waitAnimate | 266 |
| keyframes | 269 |The 0% to 100% animation rule. | 270 |SASS map object | 271 |Yes | 272 |273 | |
| duration | 276 |277 | The length of the animation in seconds (wait time will be added 278 | to this). 279 | | 280 |Number | 281 |No | 282 |1 | 283 |
| waitTime | 286 |287 | The amount of pause time in seconds at the end of the animation. 288 | | 289 |Number | 290 |No | 291 |0 | 292 |
| timingFunction | 295 |The speed curve of the animation. | 296 |String | 297 |No | 298 |linear | 299 |
| iterationCount | 302 |303 | The number of times the animation should be played. 304 | | 305 |String | 306 |No | 307 |infinite | 308 |