已经下载下来，你拆开看一下就知道了。
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00}
25% {box-shadow: 0px 0px 8px #f00}
50% {box-shadow: 0px 0px 0px #f00}
100% {box-shadow: 0px 0px 8px #f00}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s
-moz-animation:tips 1s
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
~如果你认可我的回答，请及时点击【采纳为满意回答】按钮
~~手机提问的朋友在客户端右上角评价点【满意】即可。
~你的采纳是我前进的动力
~~O(∩_∩)O，记得好评和采纳，互相帮助，谢谢。
通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。
看码——
html：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试页面</title>
<script id="jquery_183" type="text/javascript" src="//runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="testDiv01">
</div>
<button id="testBtn01">反复触发transition</button>
<br>
<div id="testDiv02">
</div>
<button id="testBtn02">反复触发animation</button>
</body>
javascript：
let [testDiv01,testDiv02,testBtn01,testBtn02]=[$('#testDiv01'),$('#testDiv02'),$('#testBtn01'),$('#testBtn02')]testBtn01.on('click',function () {
testDiv01.addClass('transi')
let t = setTimeout(()=>{
testDiv01.removeClass('transi')
clearTimeout(t)
},500)
})
testBtn02.on('click',function () {
testDiv02.addClass('ani')
let t = setTimeout(()=>{
testDiv02.removeClass('ani')
clearTimeout(t)
},500)
})
css：
body {padding: 20px
}
.testDiv {
width: 100px
height: 100px
border-radius: 50%
background-color: #e0a718
}
.testDiv.ani {
-webkit-animation: pop 200ms ease 0ms
animation: pop 200ms ease 0ms
}
.testDiv.transi {
-webkit-transform: scale(1.2)
transform: scale(1.2)
-webkit-transition: -webkit-transform 0.5s
transition: -webkit-transform 0.5s
transition: transform 0.5s
transition: transform 0.5s, -webkit-transform 0.5s
}
.testBtn {
margin-top: 20px
height: 30px
padding: 0px 10px
border: 1px solid #CCCCCC
}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0)
transform: scale(0)
}
50% {
-webkit-transform: scale(1.2)
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1)
transform: scale(1)
}
}
@keyframes pop {
0% {
-webkit-transform: scale(0)
transform: scale(0)
}
50% {
-webkit-transform: scale(1.2)
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1)
transform: scale(1)
}
}
如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>执行两个CSS3动画</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<style>
*{ padding:0margin:0font-size:14pxbox-sizing:border-box }
.div{ margin: 50px autowidth: 240pxheight: 240pxtext-align: centerline-height: 240pxbackground: #34343Acolor: #FFF }
.dh{ animation: dh 4s linear both }
@keyframes dh{
0%{
border-radius: 0px transform: rotateZ(0deg)
}
50%{
border-radius: 50% transform: rotateZ(0deg)
}
100%{
border-radius: 10%
transform: rotateZ(360deg)
}
}
.dh1{ animation: dh1 2s linear both }
@keyframes dh1{
0%{
border-radius: 0px transform: rotateZ(0deg)
}
100%{
border-radius: 50% transform: rotateZ(0deg)
}
}
.dh2{ animation: dh2 2s linear both }
@keyframes dh2{
0%{
border-radius: 50% transform: rotateZ(0deg)
}
100%{
border-radius: 10% transform: rotateZ(360deg)
}
}
</style>
</head>
<body>
<div class="div dh">纯CSS</div>
<div class="div div1">js控制</div>
</body>
<script type="text/javascript">
$(function(){
$('.div1').addClass('dh1')
var t = parseFloat( $('.dh1').css('animation-duration') )
setTimeout(function(){
$('.div1').removeClass('dh1').addClass('dh2')
},t*1000)
})
</script>
</html>
