| | |
| | | |
| | | |
| | | .animate(@animate_name) { |
| | | display : flex; |
| | | -webkit-animation-duration : 0.18s; |
| | | animation-duration : 0.18s; |
| | | -webkit-animation-fill-mode: both; |
| | | animation-fill-mode : both; |
| | | animation-name : @animate_name; |
| | | display : flex; |
| | | -webkit-animation-duration : 0.18s; |
| | | animation-duration : 0.18s; |
| | | -webkit-animation-fill-mode: both; |
| | | animation-fill-mode : both; |
| | | animation-name : @animate_name; |
| | | } |
| | | |
| | | .animated { |
| | |
| | | } |
| | | |
| | | @keyframes rotate { |
| | | from { |
| | | transform: rotate(0deg); |
| | | } |
| | | from { |
| | | transform: rotate(0deg); |
| | | } |
| | | |
| | | 25% { |
| | | transform: rotate(45deg); |
| | | } |
| | | 25% { |
| | | transform: rotate(45deg); |
| | | } |
| | | |
| | | 50% { |
| | | transform: rotate(90deg); |
| | | } |
| | | 50% { |
| | | transform: rotate(90deg); |
| | | } |
| | | |
| | | 75% { |
| | | transform: rotate(135deg); |
| | | } |
| | | 75% { |
| | | transform: rotate(135deg); |
| | | } |
| | | |
| | | 100% { |
| | | transform: rotate(180deg); |
| | | } |
| | | 100% { |
| | | transform: rotate(180deg); |
| | | } |
| | | } |
| | | |
| | | @keyframes rotate_return { |
| | | from { |
| | | transform: rotate(180deg); |
| | | } |
| | | from { |
| | | transform: rotate(180deg); |
| | | } |
| | | |
| | | 25% { |
| | | transform: rotate(135deg); |
| | | } |
| | | 25% { |
| | | transform: rotate(135deg); |
| | | } |
| | | |
| | | 50% { |
| | | transform: rotate(90deg); |
| | | } |
| | | 50% { |
| | | transform: rotate(90deg); |
| | | } |
| | | |
| | | 75% { |
| | | transform: rotate(45deg); |
| | | } |
| | | 75% { |
| | | transform: rotate(45deg); |
| | | } |
| | | |
| | | 100% { |
| | | transform: rotate(0deg); |
| | | } |
| | | 100% { |
| | | transform: rotate(0deg); |
| | | } |
| | | } |
| | | |
| | | |
| | | @-webkit-keyframes flipInY { |
| | | from { |
| | | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
| | |
| | | -webkit-transform: perspective(400px); |
| | | transform: perspective(400px); |
| | | } |
| | | } |
| | | |
| | | @keyframes flipInY { |
| | | from { |
| | | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
| | | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); |
| | | -webkit-animation-timing-function: ease-in; |
| | | animation-timing-function: ease-in; |
| | | opacity: 0; |
| | | } |
| | | |
| | | 40% { |
| | | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
| | | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); |
| | | -webkit-animation-timing-function: ease-in; |
| | | animation-timing-function: ease-in; |
| | | } |
| | | |
| | | 60% { |
| | | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
| | | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); |
| | | opacity: 1; |
| | | } |
| | | |
| | | 80% { |
| | | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
| | | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); |
| | | } |
| | | |
| | | to { |
| | | -webkit-transform: perspective(400px); |
| | | transform: perspective(400px); |
| | | } |
| | | } |