常用动画特效 - CSS实现

不是样式的生产者，只是样式的搬运工

项目开发中用到的特效，在此规整，方便以后使用

/* 闪烁特效 */ .class-name{ -webkit-animation: twinkling 1s infinite ease-in-out } .animated{ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes twinkling{ 0%{ opacity: 0.5; } 100%{ opacity: 1; } } @keyframes twinkling{ 0%{ opacity: 0.5; } 100%{ opacity: 1; } }

 

/* 上下跳动特效 */ .class-name{ -webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite; } @-webkit-keyframes bounce-down { 25% {-webkit-transform: translateY(-6px);} 50%, 100% {-webkit-transform: translateY(0);} 75% {-webkit-transform: translateY(6px);} } @keyframes bounce-down { 25% {transform: translateY(-6px);} 50%, 100% {transform: translateY(0);} 75% {transform: translateY(6px);} } /* 左右抖动特效 */ @-webkit-keyframes zy{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @-moz-keyframes zy{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @-o-keyframes zy{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @keyframes zy{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } .shake-zy{ animation: zy 2.5s .15s linear infinite; -moz-animation: zy 2.5s .15s linear infinite; /* Firefox */ -webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */ -o-animation: zy 2.5s .15s linear infinite; /* Opera */ } /* 扫描动画特效 */ .swiper-animate { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; border-bottom: 3px solid #349587; background: linear-gradient(180deg,transparent,#349587); // 也可以用图片做背景，如网格图片 animation: scan 1.2s ease-in-out infinite; -webkit-animation: scan 1.2s ease-in-out infinite; } @keyframes scan{ 0%{ height:0 } to{ opacity:0; height:300px; // 扫描框的高度，根据情况调整 } } @-webkit-keyframes scan { 0%{ height:0 } to{ opacity:0; height:300px; // 扫描框的高度，根据情况调整 } }