File manager - Edit - /home/custbahd/irungikitchen.com/admin/css/animations/attention/shake.css
Back
/* ---------------------------------------------- * Generated by Animista on 2021-6-3 10:57:3 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation shake-horizontal * ---------------------------------------- */ .shake-horizontal { -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } @keyframes shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 80% { -webkit-transform: translateX(8px); transform: translateX(8px); } 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); } } /** * ---------------------------------------- * animation shake-br * ---------------------------------------- */ .shake-br { -webkit-animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-br { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-br { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-vertical * ---------------------------------------- */ .shake-vertical { -webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-vertical { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); } 80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); } 90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); } } @keyframes shake-vertical { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); } 80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); } 90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); } } /** * ---------------------------------------- * animation shake-bottom * ---------------------------------------- */ .shake-bottom { -webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-bottom { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-bottom { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-lr * ---------------------------------------- */ .shake-lr { -webkit-animation: shake-lr 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-lr 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-lr { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 10% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 20%, 40%, 60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 30%, 50%, 70% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 80% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 90% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @keyframes shake-lr { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 10% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 20%, 40%, 60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 30%, 50%, 70% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 80% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 90% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } } /** * ---------------------------------------- * animation shake-bl * ---------------------------------------- */ .shake-bl { -webkit-animation: shake-bl 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-bl 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-bl { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-bl { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-top * ---------------------------------------- */ .shake-top { -webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-top { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-top { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-left * ---------------------------------------- */ .shake-left { -webkit-animation: shake-left 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-left 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-left { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-left { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-tr * ---------------------------------------- */ .shake-tr { -webkit-animation: shake-tr 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-tr 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-tr { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-tr { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-tl * ---------------------------------------- */ .shake-tl { -webkit-animation: shake-tl 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-tl 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-tl { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-tl { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } /** * ---------------------------------------- * animation shake-right * ---------------------------------------- */ .shake-right { -webkit-animation: shake-right 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-right 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @-webkit-keyframes shake-right { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes shake-right { 0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20%, 40%, 60% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 30%, 50%, 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } }
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Generation time: 1.09 |
proxy
|
phpinfo
|
Settings