top | item 13509469

(no title)

OK I got calmer, but then I got stressed out! the blue circle is not in the center of the black ring.

discuss

I'm just learning CSS animations and thought I'd do one that way.

    <body><style>.circle{border-radius:50%;width:30vw;height:30vw;margin: auto}.breathe{animation:8s linear 0s infinite alternate breathe;}.inner{background-color:teal;}.border{border:10px solid black;}@keyframes breathe{0%{transform:scale(1);}25%{transform:scale(1);}75%{transform:scale(0.5);}100%{transform:scale(0.5);}}</style><div class="circle border"><div class="inner circle breathe">

Or, as a data URI:

    data:text/html;charset=utf-8;base64,PGJvZHk+PHN0eWxlPi5jaXJjbGV7Ym9yZGVyLXJhZGl1czo1MCU7d2lkdGg6MzB2dztoZWlnaHQ6MzB2dzttYXJnaW46IGF1dG99LmJyZWF0aGV7YW5pbWF0aW9uOjhzIGxpbmVhciAwcyBpbmZpbml0ZSBhbHRlcm5hdGUgYnJlYXRoZTt9LmlubmVye2JhY2tncm91bmQtY29sb3I6dGVhbDt9LmJvcmRlcntib3JkZXI6MTBweCBzb2xpZCBibGFjazt9QGtleWZyYW1lcyBicmVhdGhlezAle3RyYW5zZm9ybTpzY2FsZSgxKTt9MjUle3RyYW5zZm9ybTpzY2FsZSgxKTt9NzUle3RyYW5zZm9ybTpzY2FsZSgwLjUpO30xMDAle3RyYW5zZm9ybTpzY2FsZSgwLjUpO319PC9zdHlsZT48ZGl2IGNsYXNzPSJjaXJjbGUgYm9yZGVyIj48ZGl2IGNsYXNzPSJpbm5lciBjaXJjbGUgYnJlYXRoZSI+

(Be sure to triple-click to select all.)

746F7475|9 years ago

I would leave a slight gap between the outer edge, it just feels claustrophobic when the blue and black parts touch. Also it needs some fancy speed up/slow down parts at the end of the exhale/inhale parts, it stops and starts too abruptly.

Otherwise it's pretty bang on.

cstrat|9 years ago

haha every deep breath in I noticed that too... such a tiny thing but so distracting

mkoryak|9 years ago

I didn't notice, but now I cant stop noticing. Thanks :P

liaocs2008|9 years ago

Haha! I didn't notice that yet