0
Inspiriert von diesem Tutorial http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ habe ich beschlossen, reine CSS-Version von ähnlichen Effekt zu machen.seltsame Keyframes Einstellung in CSS-Animation
Und es sieht gut aus und funktioniert ziemlich glatt. Was mich stört ist, warum ich nach ein paar Versuchen Keyframes bei 24% und 74% anstelle von 50% setzen musste? Mit 50% Animation sieht abgehackt aus. Ich mag es wirklich nicht, Dinge mit verbundenen Augen zu tun, also bin ich dankbar für Hilfe.
Hier ist schnell schmutzig Umsetzung:
\t html {
\t \t background: #ccc;
\t }
\t .card {
\t \t position: relative;
\t \t display: inline-block;
\t \t height: 400px;
\t \t width: 200px;
\t \t background: #000;
\t \t margin: 50px;
\t \t overflow: hidden;
\t }
\t
\t .card-head {
\t \t position: absolute;
\t \t background: #000;
\t \t height: 400px;
\t \t width: 400px;
\t \t border-radius: 50%;
\t \t left: -100px;
\t \t top: -173px;
\t \t z-index: 10;
\t \t -webkit-animation-name: carda;
\t \t animation-name: carda;
\t }
\t
\t .card-extend {
\t \t position: absolute;
\t \t background: #fff;
\t \t height: 400px;
\t \t width: 400px;
\t \t bottom: -200px;
\t \t left: -100px;
\t \t z-index: 5;
\t \t -webkit-animation-name: cardb;
\t \t animation-name: cardb;
\t }
\t
\t .card-animated {
\t \t -webkit-animation-duration: .2s;
\t \t animation-duration: .2s;
\t \t -webkit-animation-fill-mode: forwards;
\t \t animation-fill-mode: forwards;
\t \t -webkit-animation-timing-function:ease-in-out;
\t animation-timing-function:ease-in-out;
\t }
\t
\t .card:hover .card-head,
\t .card:focus .card-head{
\t \t -webkit-animation-name: cardhovera;
\t \t animation-name: cardhovera;
\t }
\t
\t .card:hover .card-extend,
\t .card:focus .card-extend{
\t \t -webkit-animation-name: cardhoverb;
\t \t animation-name: cardhoverb;
\t }
\t
\t @-webkit-keyframes carda {
\t \t from {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t \t 24% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t }
\t
\t @keyframes carda {
\t \t from {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t \t 24% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t }
\t
\t @-webkit-keyframes cardhovera {
\t \t from {
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t \t 76% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t }
\t
\t @keyframes cardhovera {
\t \t from {
\t \t \t border-radius: 50%;
\t \t \t top: -173px;
\t \t }
\t \t 76% {
\t \t \t top: -320px;
\t \t \t border-radius: 25%;
\t \t \t z-index: 2;
\t \t }
\t \t to {
\t \t \t border-radius: 0%;
\t \t \t top: -320px;
\t \t \t z-index: 2;
\t \t }
\t }
\t
\t @-webkit-keyframes cardb {
\t \t from {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t \t 76% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t }
\t
\t @keyframes cardb {
\t \t from {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t \t 76% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to { \t \t \t
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t }
\t @-webkit-keyframes cardhoverb {
\t \t from {
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t \t 24% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t }
\t \t to {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t }
\t
\t @keyframes cardhoverb {
\t \t from {
\t \t \t border-radius: 0;
\t \t \t z-index: 5;
\t \t \t bottom: -200px;
\t \t }
\t \t 24% {
\t \t \t bottom: -200px;
\t \t \t border-radius: 25%;
\t \t \t
\t \t }
\t \t to {
\t \t \t bottom: -53px;
\t \t \t border-radius: 50%;
\t \t }
\t }<div tabindex="0" class="card">
\t \t <div class="card-head card-animated">
\t \t </div>
\t \t <div class="card-extend card-animated">
\t \t </div>
\t </div>