667 views
CSSAdd prefixes
1.container { 2 position: absolute; 3 width: 100px; 4 height: 100px; 5 top: 0; 6 bottom: 0; 7 left: 0; 8 right: 0; 9 margin: auto; 10} 11 12.item { 13 width: 50px; 14 height: 50px; 15 position: absolute; 16} 17 18.item-1 { 19 background-color: rgb(250, 87, 103); 20 top: 0; 21 left: 0; 22 z-index: 1; 23 animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite; 24} 25 26.item-2 { 27 background-color: rgb(121, 68, 228); 28 top: 0; 29 right: 0; 30 animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite; 31} 32 33.item-3 { 34 background-color: rgb(27, 145, 247); 35 bottom: 0; 36 right: 0; 37 z-index: 1; 38 animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite; 39} 40 41.item-4 { 42 background-color: rgb(250, 194, 76); 43 bottom: 0; 44 left: 0; 45 animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite; 46} 47 48@keyframes item-1_move { 49 0%, 100% { 50 transform: translate(0, 0) 51 } 52 53 25% { 54 transform: translate(0, 50px) 55 } 56 57 50% { 58 transform: translate(50px, 50px) 59 } 60 61 75% { 62 transform: translate(50px, 0) 63 } 64} 65 66@keyframes item-2_move { 67 0%, 100% { 68 transform: translate(0, 0) 69 } 70 71 25% { 72 transform: translate(-50px, 0) 73 } 74 75 50% { 76 transform: translate(-50px, 50px) 77 } 78 79 75% { 80 transform: translate(0, 50px) 81 } 82} 83 84@keyframes item-3_move { 85 0%, 100% { 86 transform: translate(0, 0) 87 } 88 89 25% { 90 transform: translate(0, -50px) 91 } 92 93 50% { 94 transform: translate(-50px, -50px) 95 } 96 97 75% { 98 transform: translate(-50px, 0) 99 } 100} 101 102@keyframes item-4_move { 103 0%, 100% { 104 transform: translate(0, 0) 105 } 106 107 25% { 108 transform: translate(50px, 0) 109 } 110 111 50% { 112 transform: translate(50px, -50px) 113 } 114 115 75% { 116 transform: translate(0, -50px) 117 } 118}
HTML
1<div class="container"> 2 <div class="item item-1"></div> 3 <div class="item item-2"></div> 4 <div class="item item-3"></div> 5 <div class="item item-4"></div> 6</div>