HTML之CSS Animation 属性常用动画

  • 引入下面的样式表后
    -webkit-animation: tada 1s ease 0.3s infinite both;
  • -webkit-animation: name duration timing-function delay iteration_count direction
  • animation 各个参数详细用法请看
    https://www.w3school.com.cn/css/css3_animations.asp
  • cubic-bezier 生成器
    https://cubic-bezier.com
  •    /*====进入====淡入：fadeIn翻转进入：flipInY中心弹入：bounceIn 中心放大：zoomIn翻转进入：rollIn光速进入：lightSpeedIn移入，从左向右：fadeInLeft移入，从上向下：fadeInDown 移入，从右向左：fadeInRight移入，从下向上：fadeInUp弹入，从左向右：bounceInLeft弹入，从上向下：bounceInDown 弹入，从右向左：bounceInRight弹入，从下向上：bounceInUp========强调======摇摆：wobble 抖动：rubberBand旋转：rotateIn翻转：flip 悬摆：swing放大抖动：tada 倾斜摆动：jello =========退出===========淡出：fadeOut 翻转消失：flipOutY 中心消失：bounceOut 翻滚退出：rollOut 光速退出：lightSpeedOut*/@-webkit-keyframes rollIn { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}100% {opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}100% {opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes lightSpeedIn { 0% {-webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60% {-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80% {-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100% {-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn { 0% {-webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60% {-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80% {-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100% {-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes fadeInLeft { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}100% {opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}100% {opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInRight { 0% {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100% {opacity:1;transform:none}}@keyframes fadeInRight { 0% {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100% {opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInUp { 0% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}100% {opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp { 0% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}100% {opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}@-webkit-keyframes fadeOutDown { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}@keyframes fadeOutDown { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}@-webkit-keyframes fadeOutLeft { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}}@keyframes fadeOutLeft { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}}@-webkit-keyframes fadeOutRight { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}}@keyframes fadeOutRight { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}}@-webkit-keyframes fadeOutUp { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@keyframes fadeOutUp { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@-webkit-keyframes swing { 20% {-webkit-transform:rotate3d(0, 0, 1, 15deg);transform:rotate3d(0, 0, 1, 15deg)}40% {-webkit-transform:rotate3d(0, 0, 1, -10deg);transform:rotate3d(0, 0, 1, -10deg)}60% {-webkit-transform:rotate3d(0, 0, 1, 5deg);transform:rotate3d(0, 0, 1, 5deg)}80% {-webkit-transform:rotate3d(0, 0, 1, -5deg);transform:rotate3d(0, 0, 1, -5deg)}100% {-webkit-transform:rotate3d(0, 0, 1, 0deg);transform:rotate3d(0, 0, 1, 0deg)}}@keyframes swing { 20% {-webkit-transform:rotate3d(0, 0, 1, 15deg);transform:rotate3d(0, 0, 1, 15deg)}40% {-webkit-transform:rotate3d(0, 0, 1, -10deg);transform:rotate3d(0, 0, 1, -10deg)}60% {-webkit-transform:rotate3d(0, 0, 1, 5deg);transform:rotate3d(0, 0, 1, 5deg)}80% {-webkit-transform:rotate3d(0, 0, 1, -5deg);transform:rotate3d(0, 0, 1, -5deg)}100% {-webkit-transform:rotate3d(0, 0, 1, 0deg);transform:rotate3d(0, 0, 1, 0deg)}}@-webkit-keyframes wobble { 0% {-webkit-transform:none;transform:none}15% {-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30% {-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45% {-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60% {-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75% {-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}100% {-webkit-transform:none;transform:none}}@keyframes wobble { 0% {-webkit-transform:none;transform:none}15% {-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30% {-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45% {-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60% {-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75% {-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}100% {-webkit-transform:none;transform:none}}@-webkit-keyframes rotateIn { from {-webkit-transform:rotate(0deg)}to { -webkit-transform: rotate(360deg) }}@-moz-keyframes rotateIn { from {-moz-transform:rotate(0deg)}to { -moz-transform: rotate(359deg) }}@-o-keyframes rotateIn { from {-o-transform:rotate(0deg)}to { -o-transform: rotate(359deg) }}@keyframes rotateIn { from {transform:rotate(0deg)}to { transform: rotate(359deg) }}@-webkit-keyframes fadeOut { 0% {opacity:1}100% {opacity:0}}@keyframes fadeOut { 0% {opacity:1}100% {opacity:0}}@-webkit-keyframes flip { 0% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);transform:perspective(400px) rotate3d(0, 1, 0, -360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40% {-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50% {-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80% {-webkit-transform:perspective(400px) scale3d(.95, .95, .95);transform:perspective(400px) scale3d(.95, .95, .95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100% {-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip { 0% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);transform:perspective(400px) rotate3d(0, 1, 0, -360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40% {-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50% {-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80% {-webkit-transform:perspective(400px) scale3d(.95, .95, .95);transform:perspective(400px) scale3d(.95, .95, .95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100% {-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@-webkit-keyframes fadeInDown { 0% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100% {opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown { 0% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100% {opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}@-webkit-keyframes fadeIn { 0% {opacity:0}100% {opacity:1}}@keyframes fadeIn { 0% {opacity:0}100% {opacity:1}}@-webkit-keyframes zoomIn { 0% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}50% {opacity:1}}@keyframes zoomIn { 0% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}50% {opacity:1}}@-webkit-keyframes zoomOut { 0% {opacity:1}50% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}100% {opacity:0}}@keyframes zoomOut { 0% {opacity:1}50% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}100% {opacity:0}}@-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}20% {-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40% {-webkit-transform:scale3d(.9, .9, .9);transform:scale3d(.9, .9, .9)}60% {opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80% {-webkit-transform:scale3d(.97, .97, .97);transform:scale3d(.97, .97, .97)}100% {opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}20% {-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40% {-webkit-transform:scale3d(.9, .9, .9);transform:scale3d(.9, .9, .9)}60% {opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80% {-webkit-transform:scale3d(.97, .97, .97);transform:scale3d(.97, .97, .97)}100% {opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(-3000px, 0, 0);transform:translate3d(-3000px, 0, 0)}60% {opacity:1;-webkit-transform:translate3d(25px, 0, 0);transform:translate3d(25px, 0, 0)}75% {-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}90% {-webkit-transform:translate3d(5px, 0, 0);transform:translate3d(5px, 0, 0)}100% {-webkit-transform:none;transform:none}}@keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(-3000px, 0, 0);transform:translate3d(-3000px, 0, 0)}60% {opacity:1;-webkit-transform:translate3d(25px, 0, 0);transform:translate3d(25px, 0, 0)}75% {-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}90% {-webkit-transform:translate3d(5px, 0, 0);transform:translate3d(5px, 0, 0)}100% {-webkit-transform:none;transform:none}}@-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60% {opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75% {-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90% {-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}100% {-webkit-transform:none;transform:none}}@keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(3000px, 0, 0);transform:translate3d(3000px, 0, 0)}60% {opacity:1;-webkit-transform:translate3d(-25px, 0, 0);transform:translate3d(-25px, 0, 0)}75% {-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}90% {-webkit-transform:translate3d(-5px, 0, 0);transform:translate3d(-5px, 0, 0)}100% {-webkit-transform:none;-ms-transform:none;transform:none}}@-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(0, 3000px, 0);transform:translate3d(0, 3000px, 0)}60% {opacity:1;-webkit-transform:translate3d(0, -25px, 0);transform:translate3d(0, -25px, 0)}75% {-webkit-transform:translate3d(0, 10px, 0);transform:translate3d(0, 10px, 0)}90% {-webkit-transform:translate3d(0, -5px, 0);transform:translate3d(0, -5px, 0)}100% {-webkit-transform:none;transform:none}}@keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(0, 3000px, 0);transform:translate3d(0, 3000px, 0)}60% {opacity:1;-webkit-transform:translate3d(0, -25px, 0);transform:translate3d(0, -25px, 0)}75% {-webkit-transform:translate3d(0, 10px, 0);transform:translate3d(0, 10px, 0)}90% {-webkit-transform:translate3d(0, -5px, 0);transform:translate3d(0, -5px, 0)}100% {-webkit-transform:none;transform:none}}@-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(0, -3000px, 0);transform:translate3d(0, -3000px, 0)}60% {opacity:1;-webkit-transform:translate3d(0, 25px, 0);transform:translate3d(0, 25px, 0)}75% {-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0)}90% {-webkit-transform:translate3d(0, 5px, 0);transform:translate3d(0, 5px, 0)}100% {-webkit-transform:none;transform:none}}@keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000)}0% {opacity:0;-webkit-transform:translate3d(0, -3000px, 0);transform:translate3d(0, -3000px, 0)}60% {opacity:1;-webkit-transform:translate3d(0, 25px, 0);transform:translate3d(0, 25px, 0)}75% {-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0)}90% {-webkit-transform:translate3d(0, 5px, 0);transform:translate3d(0, 5px, 0)}100% {-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOut { 20% {-webkit-transform:scale3d(.9, .9, .9);transform:scale3d(.9, .9, .9)}50%, 55% {opacity:1;-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}100% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}}@keyframes bounceOut { 20% {-webkit-transform:scale3d(.9, .9, .9);transform:scale3d(.9, .9, .9)}50%, 55% {opacity:1;-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}100% {opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3)}}@-webkit-keyframes bounceOutDown { 20% {-webkit-transform:translate3d(0, 10px, 0);transform:translate3d(0, 10px, 0)}40%, 45% {opacity:1;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}100% {opacity:0;-webkit-transform:translate3d(0, 2000px, 0);transform:translate3d(0, 2000px, 0)}}@keyframes bounceOutDown { 20% {-webkit-transform:translate3d(0, 10px, 0);transform:translate3d(0, 10px, 0)}40%, 45% {opacity:1;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}100% {opacity:0;-webkit-transform:translate3d(0, 2000px, 0);transform:translate3d(0, 2000px, 0)}}@-webkit-keyframes bounceOutLeft { 20% {opacity:1;-webkit-transform:translate3d(20px, 0, 0);transform:translate3d(20px, 0, 0)}100% {opacity:0;-webkit-transform:translate3d(-2000px, 0, 0);transform:translate3d(-2000px, 0, 0)}}@keyframes bounceOutLeft { 20% {opacity:1;-webkit-transform:translate3d(20px, 0, 0);transform:translate3d(20px, 0, 0)}100% {opacity:0;-webkit-transform:translate3d(-2000px, 0, 0);transform:translate3d(-2000px, 0, 0)}}@-webkit-keyframes bounceOutRight { 20% {opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}100% {opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@keyframes bounceOutRight { 20% {opacity:1;-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0)}100% {opacity:0;-webkit-transform:translate3d(2000px, 0, 0);transform:translate3d(2000px, 0, 0)}}@-webkit-keyframes bounceOutUp { 20% {-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0)}40%, 45% {opacity:1;-webkit-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0)}100% {opacity:0;-webkit-transform:translate3d(0, -2000px, 0);transform:translate3d(0, -2000px, 0)}}@keyframes bounceOutUp { 20% {-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0)}40%, 45% {opacity:1;-webkit-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0)}100% {opacity:0;-webkit-transform:translate3d(0, -2000px, 0);transform:translate3d(0, -2000px, 0)}}@-webkit-keyframes rollOut { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}@keyframes rollOut { 0% {opacity:1}100% {opacity:0;-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}@-webkit-keyframes rubberBand { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30% {-webkit-transform:scale3d(1.25, .75, 1);transform:scale3d(1.25, .75, 1)}40% {-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50% {-webkit-transform:scale3d(1.15, .85, 1);transform:scale3d(1.15, .85, 1)}65% {-webkit-transform:scale3d(.95, 1.05, 1);transform:scale3d(.95, 1.05, 1)}75% {-webkit-transform:scale3d(1.05, .95, 1);transform:scale3d(1.05, .95, 1)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes rubberBand { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30% {-webkit-transform:scale3d(1.25, .75, 1);transform:scale3d(1.25, .75, 1)}40% {-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50% {-webkit-transform:scale3d(1.15, .85, 1);transform:scale3d(1.15, .85, 1)}65% {-webkit-transform:scale3d(.95, 1.05, 1);transform:scale3d(.95, 1.05, 1)}75% {-webkit-transform:scale3d(1.05, .95, 1);transform:scale3d(1.05, .95, 1)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes lightSpeedOut { 0% {opacity:1}100% {-webkit-transform:translate3d(100%, 0, 0) skewX(30deg);transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut { 0% {opacity:1}100% {-webkit-transform:translate3d(100%, 0, 0) skewX(30deg);transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}@-webkit-keyframes heartbeat { 0% {-webkit-transform:scale(1);transform:scale(1)}50% {-webkit-transform:scale(1.5);transform:scale(1.5)}100% {-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartbeat { 0% {-webkit-transform:scale(1);transform:scale(1)}50% {-webkit-transform:scale(1.5);transform:scale(1.5)}100% {-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes flipOutY { 0% {-webkit-transform:perspective(400px);transform:perspective(400px)}30% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);transform:perspective(400px) rotate3d(0, 1, 0, -15deg);opacity:1}100% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);transform:perspective(400px) rotate3d(0, 1, 0, 90deg);opacity:0}}@keyframes flipOutY { 0% {-webkit-transform:perspective(400px);transform:perspective(400px)}30% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);transform:perspective(400px) rotate3d(0, 1, 0, -15deg);opacity:1}100% {-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);transform:perspective(400px) rotate3d(0, 1, 0, 90deg);opacity:0}}@-webkit-keyframes flipInY { 0% {-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)}100% {-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY { 0% {-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)}100% {-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes flipInX { 0% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100% {-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX { 0% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100% {-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes flipOutX { 0% {-webkit-transform:perspective(400px);transform:perspective(400px)}30% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);opacity:1}100% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipOutX { 0% {-webkit-transform:perspective(400px);transform:perspective(400px)}30% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);opacity:1}100% {-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}}@-webkit-keyframes tada { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}10%, 20% {-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)}30%, 50%, 70%, 90% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%, 60%, 80% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes tada { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}10%, 20% {-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)}30%, 50%, 70%, 90% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%, 60%, 80% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes jello { 11.1% {-webkit-transform:none;transform:none}22.2% {-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3% {-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4% {-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5% {-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6% {-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7% {-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8% {-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}100% {-webkit-transform:none;transform:none}}@keyframes jello { 11.1% {-webkit-transform:none;transform:none}22.2% {-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3% {-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4% {-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5% {-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6% {-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7% {-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8% {-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}100% {-webkit-transform:none;transform:none}}@-webkit-keyframes flash { 0%, 50%, 100% {opacity:1}25%, 75% {opacity:0}}@keyframes flash { 0%, 50%, 100% {opacity:1}25%, 75% {opacity:0}}@-webkit-keyframes pulse { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}50% {-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes pulse { 0% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}50% {-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes scaleUp { 0% {-webkit-transform:scale(1)}100% {-webkit-transform:scale(1.5)}}@keyframes scaleUp { 0% {transform:scale(1)}100% {transform:scale(1.5)}}@-webkit-keyframes scaleDown { 0% {-webkit-transform:scale(1.5)}100% {-webkit-transform:scale(1)}}@keyframes scaleDown { 0% {transform:scale(1.5)}100% {transform:scale(1)}}@-webkit-keyframes blur { 0% {-webkit-filter:blur(0px)}100% {-webkit-filter:blur(8px)}}@keyframes blur { 0% {-webkit-filter:blur(0px)}100% {-webkit-filter:blur(8px)}}@-webkit-keyframes sharp { 0% {-webkit-filter:blur(8px)}100% {-webkit-filter:blur(0px)}}@keyframes sharp { 0% {-webkit-filter:blur(8px)}100% {-webkit-filter:blur(0px)}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/622999.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python统计分析——操作案例（模拟抽样）

python统计分析——操作案例（模拟抽样）

参考资料：用python动手学统计学 import numpy as np import pandas as pd from matplotlib import pyplot as plt import seaborn as snsdata_setpd.read_csv(r"C:\python统计学\3-4-1-fish_length_100000.csv")[length] #此处将文件路径改为自己的路…
阅读更多...
数据结构(c)冒泡排序

数据结构(c)冒泡排序

本文除了最下面的代码是我写的，其余是网上抄写的。 冒泡排序 什么是冒泡排序？ 冒泡排序（Bubble Sort）是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交…
阅读更多...
【5G Modem】5G modem架构介绍

【5G Modem】5G modem架构介绍

博主未授权任何人或组织机构转载博主任何原创文章，感谢各位对原创的支持！ 博主链接 本人就职于国际知名终端厂商，负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作，目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
概率论与数理统计————1.随机事件与概率

概率论与数理统计————1.随机事件与概率

一、随机事件 随机试验：满足三个特点 （1）可重复性：可在相同的条件下重复进行 （2）可预知性：每次试验的可能不止一个，事先知道试验的所有可能结果 （3）不确定…
阅读更多...
使用Spring Boot集成中间件：Kafka的高级使用案例讲解

使用Spring Boot集成中间件：Kafka的高级使用案例讲解

使用Spring Boot集成中间件：Kafka的具体使用案例讲解 导言 在实际应用中，Kafka作为一种强大的分布式消息系统，广泛应用于实时数据处理和消息传递。本文将通过一个全面的使用案例，详细介绍如何使用Spring Boot集成Kafka&#xff…
阅读更多...
matlab串口数据交互的使用

matlab串口数据交互的使用

一、matlab将串口数据读取并储存到position中 delete(instrfindall);%注销系统之前已经打开的串口资源 clear s %清空s的数据 s serial(COM6,BaudRate,115200);%定义串口及波特率 fopen(s)%打开串口 fwrite(s,00AB,)%向串口写入读取电机位置指令 for i1:8 %共8个电机position…
阅读更多...
JVM实战（15）——Full GC调优

JVM实战（15）——Full GC调优

作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 学习必须往深处挖&…
阅读更多...
气象能见度监测站的应用介绍

气象能见度监测站的应用介绍

【TH-NJD10】能见度是反映大气透明度的一个重要指标，对于航空、航海、道路交通等领域具有重要意义。 一、气象能见度监测站的应用 交通气象服务 气象能见度监测站在交通气象服务中发挥着重要作用。在高速公路、机场、港口等交通枢纽，能见度监测数据对于交…
阅读更多...
U盘格式化后数据能恢复吗？几个具体解决问题的答案

U盘格式化后数据能恢复吗？几个具体解决问题的答案

U盘是一种常见的存储设备，它可以方便我们携带各种文件和数据。但是，当我们不小心将U盘格式化了，里面的数据也将全部都消失。并且，对于一些拥有较多电脑操作技能的用户来讲，格式化删除的数据与普通右击删除的方式相比&a…
阅读更多...
机器人制作开源方案 | 乒乓球自动拾取机器人

机器人制作开源方案 | 乒乓球自动拾取机器人

作者：刘众森、王森、王绘东、崔岳震、宋维鑫 单位：山东农业工程学院 指导老师：潘莹月、廖希杰 1. 场景调研 我们小组选择项目的任务方向乒乓球的捡取与存放，针对此问题我们研发了一款乒乓球自动拾取机器人。众所周知&#xff0…
阅读更多...
【Unity】【VRTK】【Pico】如何快速在VRTK中引入带动画的PICO控制器

【Unity】【VRTK】【Pico】如何快速在VRTK中引入带动画的PICO控制器

【背景】 之前的VRTK篇章中，我只介绍了Oculus，Open VR，SImulator这三种Rig的配置方法，那么Pico如何融合VRTK进行开发呢？ 【需要的开发包】 先像一个正常PICO项目那样导入PICO的SDK到Unity。VRTK 4的Package导入器中搜Pico，可以导入一个Pico的Integration，导入后Projec…
阅读更多...
238.【2023年华为OD机试真题（C卷）】火星文计算（模拟-JavaPythonC++JS实现）

238.【2023年华为OD机试真题（C卷）】火星文计算（模拟-JavaPythonC++JS实现）

🚀点击这里可直接跳转到本专栏，可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路，高质量解题代码(Java&Python&C++&JS分别实现)，详细代码讲解，助你深入学习，深度掌握！ 文章目录 一. 题目-火星文计算二.解题思路三.题解代码Python题解代…
阅读更多...
python中none的替换方法：pandasnumpy

python中none的替换方法：pandasnumpy

none的替换方法： 1.pandas # 将缺失的id值替换为None merged_df[id].fillna(None, inplaceTrue) #这行代码使用了Pandas库中的fillna方法，对DataFrame中的id列进行了填充操作。具体来说，它将该列中的缺失值用字符串None进行填充&#xff0c…
阅读更多...
Python中的__add__()方法

Python中的__add__()方法

在 Python 中，__add__() 是一个特殊方法（magic method），用于定义对象之间的加法操作。当你使用 运算符对两个对象进行相加时，实际上会调用对象的 __add__() 方法。 下面是一个简单的例子，演示了 __add__()…
阅读更多...
SpringCloud.03.网关Gateway

SpringCloud.03.网关Gateway

目录 网关Gateway的概念： 准备 使用 方式一 因为配置了网关所以可以直接通过gateway发送请求 方式二 修改配置前：http://localhost:8082/provider/run 方式三(动态路由) 导入配置类 网关Gateway的概念： Spring Cloud Gateway 是 Spri…
阅读更多...
【网络工程师】NAT与动态路由

【网络工程师】NAT与动态路由

一、NAT网络地址转换 1、NAT：Network Address Translations 网络地址转换 2、ip地址问题：ipv4地址严重不够用了（A、B、C类可以使用 D组播 E科研） 3、解决：把IP地址分为了公网IP和私网IP 公网IP只能在公网上使用 私网…
阅读更多...
LLM模型的generate和chat函数区别

LLM模型的generate和chat函数区别

在 Hugging Face 的 transformers 库中，GPT（Generative Pre-trained Transformer）类的模型有两个常用的生成文本的方法：generate 和 chat。这两个方法在使用上有一些区别。通常公司发布的 LLM 模型会有一个基础版本，还…
阅读更多...
使用Docker容器部署LNMP服务

使用Docker容器部署LNMP服务

目录 实验前准备部署Nginx环境准备准备nginx.conf配置文件生成并启动镜像验证nginx 部署Mysql准备工作目录编写Dockerfile脚本准备my.cnf文件生成并启动镜像启动镜像容器验证mysql 部署php建立工作目录编写Dockerfile脚本准备配置文件生成并启动镜像验证php 启动wordpressmysql…
阅读更多...
书生·浦语大模型实战营-学习笔记3

书生·浦语大模型实战营-学习笔记3

目录 (3)基于 InternLM 和 LangChain 搭建你的知识库1. 大模型开发范式（RAG、Fine-tune）RAG微调 （传统自然语言处理的方法） 2. LangChain简介（RAG开发框架）3. 构建向量数据库4. 搭建知识库助手5. Web Demo部…
阅读更多...
非线性方程求根迭代法(C++)

非线性方程求根迭代法(C++)

文章目录 问题描述算法描述不动点迭代法一维情形多维情形 牛顿迭代法单根情形重根情形 割线法抛物线法逆二次插值法 算法实现准备工作一般迭代法割线法抛物线法逆二次插值法 实例分析例1例2 迭代法是一种求解非线性方程根的方法, 它通过构造一个迭代过程, 将一个非线性方程转化…
阅读更多...
最新文章

Copyright @ 2022~2023