Hacker News new | ask | show | jobs
by dfabulich 3428 days 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.)
1 comments
746F7475 3428 days 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.

link
dingensundso 3428 days 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>
link