This is a very quick tip, about a pet peeve of mine in almost every CSS animation I see. As you may know, I’m a sucker for reducing the amount of code (as long as it remains human readable of course). I demonstrated a very similar example in my “CSS in the 4th dimension” talk, but I recently realized I never blogged about it (or seen anyone else do so).

Lets assume you have a simple animation of a pounding heart, like so:

```
@keyframes pound {
from { transform: none; }
50% { transform: scale(1.4); }
to { transform: none; }
}
.heart {
/* ... */
animation: pound .5s infinite;
}
```

You can see the problem already: the shrunk heart state is repeated twice in the keyframes (`from`

and `to`

). You probably know you can combine them into one rule, like so:

```
@keyframes pound {
from, to { transform: none; }
50% { transform: scale(1.4); }
}
```

What many don’t know, is that you don’t need these two keyframes at all, since they basically replicate the same state as the one in the `.heart`

rule. To quote the CSS Animations spec:

If a 0% or “from” keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or “to” keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.

Therefore, the code could actually be as simple as:

```
@keyframes pound {
50% { transform: scale(1.4); }
}
```

This trick is very useful for providing fallbacks that are the same as the first or last keyframe, without having to repeat them in the `@keyframes`

rule. Of course it doesn’t only apply to animations where you only have one keyframe beyond `from`

and/or `to`

. You can omit the `from`

and `to`

keyframes in every animation, when you want them to be the same as the styles that are applied to the element anyway.

Of course, to make this particular animation appear more natural, it would be much more wise to do something like this, still with only one keyframe (the `from`

state is dynamically generated by the browser):

```
@keyframes pound {
to { transform: scale(1.4); }
}
.heart {
/* ... */
animation: pound .25s infinite alternate;
}
```

which just reverses every even iteration, instead of trying to have both states (shrinking and growing) in the animation. The reason this looks more natural is that `animation-direction: alternate;`

(which is what the `alternate`

keyword does in the animation shorthand) also reverses the timing (easing) function for the reversed iterations. 😉

Pingback: CSS3：Animations 实现心跳动画写法 — DBPOO's Blog()

Pingback: Bruce Lawson’s personal site : Reading List()

Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.163) | Wordpress Webdesigner()

Pingback: Tweet Parade (no.50 Dec 2012) | gonzoblog()

Pingback: Today’s Readings | Aaron T. Grogg()

Pingback: Пингвин Рыба Есть » Список для чтения()

Pingback: Weekly Design News (N.163)()

Pingback: 20+ New CSS Tutorials | Splashnology()

Pingback: Animación de corazón CSS3 usando keyframe - Blog mundosica.com()

Pingback: 20 Best New CSS Tutorials | HueDesigner()

Pingback: 27 Fresh CSS3 Tutorials()

Pingback: 27 Fresh CSS3 Tutorials - Dg3World()

Pingback: quicktip CSS-Code einsparen bei den css-Animationen | CSS3.de()

Pingback: A simple crossfading slideshow made with CSS | Getting Unstuck()

Pingback: dev51blog by Joachim Doerr – Animationen mit Keyframes und CSS3()

Pingback: angara fahise()

Pingback: kalyan matka()

Pingback: http://www.freeformfighters.co.uk/categories/mma-t-shirts/venum-mma-t-shirts.html()

Pingback: angara fahise()

Pingback: bursa orospu()

Pingback: tradeonix - http://www.tradeonixbonuses.com()

Pingback: boldenone()

Pingback: discount stanozolol()

Pingback: testosterone enanthate uk()

Pingback: dimagrire senza dieta()

Pingback: xmt85c4wx5ctwxw3tcerthve56()

Pingback: binge drinking statistics()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: دانلود شهرزاد قسمت نهم فصل دوم()

Pingback: دانلود شهرزاد قسمت دوازدهم فصل دوم()

Pingback: دانلود شهرزاد قسمت هشتم فصل دوم()

Pingback: دانلود شهرزاد قسمت هفتم فصل دوم()

Pingback: قیمت پنجره()

Pingback: دانلود قسمت هفدهم عاشقانه()

Pingback: دانلود قسمت چهارده عاشقانه()

Pingback: دانلود قسمت دهم فصل دوم شهرزاد()

Pingback: دانلود قسمت ششم فصل دوم شهرزاد()

Pingback: دانلود قسمت دوازدهم عاشقانه()

Pingback: Rachel Starr()

Pingback: Cherie DeVille()

Pingback: August Ames()

Pingback: Mia Malkova()

Pingback: Allie Haze()

Pingback: hampton bay ceiling fan blog()

Pingback: dolandirici sosyal marketim()

Pingback: lesbian porn xxx()

Pingback: Dillion Harper()

Pingback: Paleo Diet()

Pingback: Scissor lift repair miami()

Pingback: movies()

Pingback: پنجره()

Pingback: دانلود قسمت دوازه عاشقانه()

Pingback: t-shirts med hunde motiver()

Pingback: Loyola College for Sale()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: دانلود قسمت یازدهم شهرزاد دوم()

Pingback: دانلود قسمت دوازدهم عاشقانه()

Pingback: دانلود قسمت سوم شهرزاد دوم()

Pingback: how to bypass windows 7 password()

Pingback: دانلود قسمت 13 عاشقانه()

Pingback: دانلود قسمت اول فصل دوم شهرزاد()

Pingback: videos porno()

Pingback: taylormade m1 australia()

Pingback: Covone()

Pingback: medical college in India with 45% marks()

Pingback: videos porno()

Pingback: porno()

Pingback: videos porno()

Pingback: videos porno()

Pingback: videos porno()

Pingback: videos porno()

Pingback: porno()

Pingback: videos porno()

Pingback: پنجره ضد سرقت المانی()

Pingback: فروش پنجره دو سه جداره()

Pingback: آموزش پنجره دوجداره()

Pingback: دانلود قسمت 17 عاشقانه()

Pingback: دانلود سریال عاشقانه()

Pingback: how can i make my leo man happy()

Pingback: پنجره دوجداره وین تک ویستابست()

Pingback: Buy CBD Pills()

Pingback: Acne Facial Treatments Hillsboro Beach()

Pingback: Acne Facial Treatments Oakland Park()

Pingback: Acne Facial Treatments Miramar()

Pingback: Acne Facial Treatments Plantation()

Pingback: Facial Spa Services Davie()

Pingback: Acne Facial Treatments Miramar()

Pingback: دانلود موزیک()

Pingback: فروش توری پنجره دوجداره()

Pingback: پنجره دوجداره()

Pingback: groin support wrap()

Pingback: دانلود قسمت ششم شهرزاد دوم()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: Roof Repair Long Island()

Pingback: the url of the site()

Pingback: Nintendo 64 games()

Pingback: zynga poker chips for sale()

Pingback: دانلود قسمت هفتم شهرزاد دوم()

Pingback: jake burgess palo alto ca()

Pingback: clash royale hack 2017()

Pingback: پنجره()

Pingback: led strip lights()

Pingback: پنجره()

Pingback: Qiu Qiu 99()

Pingback: coin-banks review()

Pingback: coin-banks cryptocurrency()

Pingback: magazin de pescuit()

Pingback: bitcoin hft()

Pingback: wtyk uc 1()

Pingback: DraftKings DFS()

Pingback: ici()

Pingback: my baseball card()

Pingback: nicocontrol comprar()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: vpm()

Pingback: anime series()

Pingback: best price golf clubs()

Pingback: کول دانلول()

Pingback: پنجره دوجداره()

Pingback: دانلود شهرزاد 13()

Pingback: دانلود شهرزاد قسمت 15 پانزده()

Pingback: hack clash royale()

Pingback: دانلود سریال شهرزاد قسمت 15()

Pingback: دانلود شهرزاد قسمت سیزده 13()

Pingback: Accounting firms in chicago()

Pingback: Strasbourg France()

Pingback: casino()

Pingback: zobacz()

Pingback: Social Media Marketing()

Pingback: ΤΣΑΝΤΕΣ TRUSSARDI()

Pingback: http://()

Pingback: key()

Pingback: 16 دانلود شهرزاد()

Pingback: More Info()

Pingback: Roof Repair Long Island()

Pingback: Antshares()

Pingback: Evelyn()

Pingback: دانلود()

Pingback: دانلود فیلم ایرانی()

Pingback: دانلودسریال عالیجناب قسمت دوم()

Pingback: دانلود سریال عالیجناب قسمت اول 1()

Pingback: the shoes()

Pingback: truck()

Pingback: دانلود قسمت دوم عالیجناب()

Pingback: 火锅()

Pingback: this is pet()

Pingback: website()

Pingback: game()

Pingback: wheel alignment and balancing()

Pingback: zegarki damskie()

Pingback: قیمت پنجره دوجداره در ایران()

Pingback: political polls twitter()

Pingback: Small marquee hire()

Pingback: دانلود()

Pingback: دانلود()

Pingback: پنجره دوجداره وین تک()

Pingback: شرکت تولیدی پنجره دوجداره ایرانی()

Pingback: پنجره ضد سرقت()

Pingback: mixtape hosting()

Pingback: Kompaktkamera Test()

Pingback: آموزش ساخت پنجره دوجداره()

Pingback: easy business ideas()

Pingback: House Cleaning harker heights TX()

Pingback: taylormade m2 driver australia()

Pingback: strippers in las vegas()

Pingback: voucher codes()

Pingback: lï¿½()

Pingback: Limo Vancouver BC()