3 ms·

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

by sunkencity 10y ago

cstrat 10y ago
haha every deep breath in I noticed that too... such a tiny thing but so distracting
- mkoryak 10y ago
  I didn't notice, but now I cant stop noticing. Thanks :P
dfabulich 10y ago
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 10y 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.
  - dingensundso 10y ago
    > <body><style>.circle{border-radius:50%;width:30vw;height:30vw;margin: auto}.breathe{animation:8s ease-in-out 0s infinite alternate breathe;}.inner{background-color:#07a;}.border{border:10px solid black;padding:10px;}@keyframes breathe{ 0%{transform:scale(1);} 25%{transform:scale(1);} 75%{transform:scale(0.25);} 100%{transform:scale(0.25);}}</style><div class="circle border"> <div class="inner circle breathe"></div></div></body>
liaocs2008 10y ago
Haha! I didn't notice that yet

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

cstrat 10y ago

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

mkoryak 10y ago
I didn't notice, but now I cant stop noticing. Thanks :P

dfabulich 10y ago

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 10y 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.
- dingensundso 10y ago
  > <body><style>.circle{border-radius:50%;width:30vw;height:30vw;margin: auto}.breathe{animation:8s ease-in-out 0s infinite alternate breathe;}.inner{background-color:#07a;}.border{border:10px solid black;padding:10px;}@keyframes breathe{ 0%{transform:scale(1);} 25%{transform:scale(1);} 75%{transform:scale(0.25);} 100%{transform:scale(0.25);}}</style><div class="circle border"> <div class="inner circle breathe"></div></div></body>

liaocs2008 10y ago

Haha! I didn't notice that yet