球放入盒子时如何改变图像？

时间：2019-07-20 04:07:48

标签： javascript jquery css

我正在尝试使用css或jquery进行一些动画处理。我在运行项目时将球放入盒子中。如果要将球成功放入盒子中，我想更改图像。

这是我的代码 https://jsbin.com/coyarezeto/1/edit?html,css,output 

.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  position :relative;
  -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s;
  animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */

} 
.newImage{
  display:none;
  position :absolute;
  top:250px
}

@-webkit-keyframes mymove {
  from {top: 0px;}
  to {top: 200px; opacity: 0}
}

/* Standard syntax */
@keyframes mymove {
  /* from {top: 0px;}
  to {top: 250px;opacity: 0.2} */
  0% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 250px;
    opacity: .3;
    display:none
  }
}
.img{
  position :absolute;
  top:250px
}

5秒后将球插入盒子时，我想更改image 

 <img class="newImage" width="100" src="https://previews.123rf.com/images/boygointer/boygointer1511/boygointer151100234/49187556-open-gift-box-over-white-background-3d-illustration.jpg"

4 个答案:

答案 0 :(得分：1)

您可以使用setTimeout并在5 secs之后显示图像。即：

//display image after 5 seconds
setTimeout(function() {
  document.getElementById('myimage').style.display = 'block';
}, 5000);
.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  position: relative;
  -webkit-animation: mymove 5s;
  /* Safari 4.0 - 8.0 */
  animation: mymove 5s;
  animation-timing-function: ease-in-out;
  /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}

.newImage {
  display: none;
  position: absolute;
  top: 250px
}

@-webkit-keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
    opacity: 0
  }
}


/* Standard syntax */

@keyframes mymove {
  /* from {top: 0px;}
  to {top: 250px;opacity: 0.2} */
  0% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 250px;
    opacity: .3;
    display: none
  }
}

.img {
  position: absolute;
  top: 250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <!--   <div class="container">
   -->
  <div class="circle0"></div>
  <!-- </div>
 -->
  <img class="img" width="100" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATDxUSEBAWFhUVFhcVFRIXEBcQEhcVFhEXFxUSFxUYHyggGBolGxMVITEhJSktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy4mHR0tLi0tKy0tLystLS0tKy4rLTAtLTAtLS8rLS0tKy0tLS0tLy0tLS0tLS0rLS0rLS0rLf/AABEIAOMA3gMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABgcDBAUCAQj/xABIEAABAwECCgYGBwYFBQEAAAABAAIDEQQFBhIhMUFRYXGRsQcTMoGhwSIjQnKy0RQkM1Jic5IlgqKjwvBDRGOz4TRTg4TxCP/EABoBAQACAwEAAAAAAAAAAAAAAAABBAIDBQb/xAA2EQEAAgECAwUGBAYCAwAAAAAAAQIDBBEFEjEhMkFRcRMiYYGRsSPB0fAUMzRCoeEk8VKSsv/aAAwDAQACEQMRAD8AvFAQEBAQEBAQEBB8qgqPpffNNao4mEhkLcbIaVe/Oe5obxKpanebbeT03BopjxTeetp/xH+0GY+3s7Fomb7sz28itHvx4uttp7dax9IbLMJb2Zmtc368bmp9pkjxYTpNJbrSPozsw/vhv+ad3xRO5sKn22SPFhPDNHb+yPrP6tyDpVvRvadE73oQPhIUxqbw1W4LpbdImPn+u6zujXCmS8LG6aVrQ9srmENBDaAAtNCTocruO02r29XmNZhriyzFO74bpYtiqICAgICAgICAgICAgICAgICAgIPMjwASTQAEk7BnKJiN52h+YL3vN89qktLiQ6R5dnoQPZbUamgDuXMtPNO72+LFGLHGOOkMQt81a9dJX8xx803llyV8oZW3vaB/jO76O5hN5Y+yp5Pbb7tGlzXb4meQCc0nsqvpvt1KujjP7rh5pvuiaRWN95dmGxRzXc61tbSjJC5ta4r2AgivAjeFtnHHVSjWW7s9Ux//AD+fqVoGqcHjE35KxhnscfiVdrx6LTW5zRAQEBAQEBAQEBAQEBAQEBBXmF/SjBZn9VZWieQGj3YxETdmMO2d2Qa1XvniOyO12dJwi+WObJ7seHn/AKRmPpktVfSssRGoOcDxWv8AibeS7PA8fhaXeunphsrzS0wPi/E09czvyAjgVnXUx4wq5uB5K9uO0T/hLLRftltFhmks87ZG9W6uKfSFRT0mnK3PpC2zeLVmYlzq6fJizVreu3aqo3DCcxCrckO7/EXhifgsw5qKPZpjVy15METoBUezZxrGrLgs8a1Hs2yNXDj37dL4oS45qhubWflVIrtKMmeLUmI8WG7L2cywT2euR7mkd7m43gwKZtt2MceGLe95NSw2mSOvVyOZ7ryzkVqmZXaY6zHbDuYGYX20XnZh9KldGZWMLHSue1zXnFNQ4/iVrFvHVwddyZN+SIiI6bRHb8X6XBrmVpw31AQEBAQEBAQEBAQEBBp3tekFmhdNaJAxjc7jr0ADOTsCi1oiN5bMWK2W0VpHbKksNukee2Y0VmrFZ8xp9pIPxEdkfhHfVU8mW1uyOj02h4fhw7WvMTf17I9EDWh2REPiD3ZZnMeC0kHNkNMh0KWq8RPZLqMveUaVPNLTOGstmPCCUf8A1TzywnTVbUWFDxrU+0a50kNuPC46SVPtGudHDl4W3719nDB99pPc13zU8+7CdPyTEotDmPd5rXZdwdJj0fLTJRtBnPLSlI3ndjqcnLTljrLr9Hdkx71sraZpMfujaXn4FYpO9ocjU15cNpfoyGZzcx7tCsuG6EFvByOyHwUobL5WgVc4AayaDxRMRM9HmK0sd2XtducDyUbwmaWjrDKpYiAgICAg1W3hEQCHVBygjKg8OvFugHkgxuvE6G+KgYnW9+sDuRKi+lK9ZbXeLonOJis/q2N0YxAMj95dk3NCr3t72zsaTBEYot4yjc8ojZitzqOZs9ju+3FfxgDmTWeO0QuNTE/0XA0pjRyt9KM7sibxPWDkyVnfHaYn9+HRlve23e4Y1ljtETtMT8SaMZuzIHB2vO0rC2Ov9q7p9dlrO2aImPOOv0aDXgioK07THV1a5K3jes7vNcqljZtVWKH1AQEGG1j0dxHy81NWvLG9WtEpsxw9WB2U1WcdkK1vftumfR1eViskrrTaJHGQNLI4mRF9A6mM8vNGg0qAK6StmO1a9sqerw5c8ezxV3jxlKry6VG0pZrMSfvSuAA/cZWv6lNtR5Qxw8Dt1y2+UfrP6IleOG94zVraXMB9mMCEDZVuXiVpnLefF1MXDNNj/t39e1wJZXOOM5xcTpJLjxK19V6tYrG0dj415BqCQRmINCmyZ+Kx+jbpCnZaGWW1yGSKQhjHuNXxuPZ9LO5pNBlzV42cWWYnaXC4lw/Hak5McbTHl4rtVt5oQEBAQVvDeD4Jntzsx3As/eOUajzUJSSzzte0OYag/wB0I0FBlQEFOdIdxywWuWcMJimdjiQCrWucBjMd9041aVzgjaqmWJrbfwej4flx5cUU396vghT2VOeq1czoTheDCp5mucTGYVlzNU4iOA1yZNqi14iO1nh0+Sbb07Pj++rY6vWfJaOd1Yw9nbL6G7VPP8GE6byl9y61PPDCdPfwkq7+ynNVhOLLBjnUp92WMxkr1h4dLUU1rLlapy79jXbpUSmk9WSKLWomW/FiiO2WZQ3vrGE5gTuFUJmI6swsUv8A2n/od8lOzD2lPOPqxTQvb2mOG9pHNNj2lZ6SwOcpiGFrPHWEZQaEZQcxBGlZbNF7dj9T3NM5kTWTzOkeM8jmNYTsIZkV6vZHa8dltW1pmtdo8v8At1QVk1vqAgIKxv1tLVKPxnmoSw2C2vidjNzHtNOYj+9KCXWC1NlbjMy62+0DqKD5ardDEKyyxspnx5Gs+IpumKzPSHEtuHd1x5HWxjtjGvmrsqxpHisZvVurpstulUavLD66HZBYnTf+tGwcXZfBa7XxruLR6z+2Zj5yit44S2OTsXLEzUTaZGnhFirTN8fk6WLSa2OuSfntP33R52NJJRjGMxiAGNx3DLtc4nxWuZjwhfrhyRX37R9P+nQNyzj2Fqmsrdc2OI2hjddUw9gqOWWXt6ebGbBKPYKjlll7Wnm8GzPHsHgm0suevmxmMjODwTZPNDnSSFx2aArFY5YcbNknNbfw8IfWtTmRGCJbEMOlYzbdbw4op1lsxtb7VT4LFtm0+DdhtMbczBwqeJU7tVq2nrLdZfFNPkp5mqcLMy+NqnmYzgZ2XztU8zCcDSt0UEwytDXaHtFD3gZCm8JitoeMB8EX220kPqIIneteNJ0RNOkmncMuqu3HTmUtZq/ZV2jvSvtxqa61aede4Z3NzHu0IN+C3tOR2Q+ClDbBQfUEK6Qoi10UrRWuM14plNMXFIOsZd6JhFmPBFQag6VCUdw8e8WQFjnN9Y0Gji2oLXZDTOK0WGTouaHacu0+SvrOW5iBXXrVS8T4PSaecXdtEb+bbAAzBat3QisR0h9RIgzWOYska5ucHINqjdFqxaNpd9mEE4zxngp55aJ0uOfFmZhS8Z4/BT7RhOir4Sztwsb7UQ/Sp9qw/gZ8JZBhRZzniHAhPaQx/gskdJad9X1ZnWeQRxgPLcVuypAJ4EqYvWUW0+WsbzPYhbWKJlnXGzxRrCZW8WLftnozqG+aVnwE3Yziq9MAqKmg0mmNQa6ZKpuxti7OxKLJgPNPH1lktEEzdNHujcD91zXj0TvW+MM2jes7uRk4jXDbkzVtWfr9mnacDLyZ2rI87WlsvwErGcV48GyvEdNbpePnvH3ce1WSWM0ljez32OZzCwmJjqtUyUv3ZifSd27g7c81rnEMW9787WM0vPkNJyLKlJvO0NWp1FNPTnt8o816XVdsVnhbDC2jG95JJq57jpcTlXQiIiNoeOyZLZLTe3WW2pYCAg2IXSNygGm3IPFBtx3gzMXCuoODuSlDh4fMrAw6n82lEwgJBacZuntN17Rqdz5QlyMNCHWB7hmDmH+MNIOo5Vhk7q1o5/GhWi0O2tK78BrNaYoupndE/EBeHt64Pq0HGZlbSmWoWU4InthUxcZyYt63jm8vD9XdsnRfY2/aSyv3FsY4AE+KmNPXxY343nnuxEf5dmyYE3bHmsrXHW9z5fBxp4LOMNI8FS/EtVfrf6bQ68d2wNYWMhY0EFpxY2tyEUOYbVnyxtsqzmyTaLTaZmPOUVdgnOM3Uu73M/pKr+xl2I4nin/yj6T+bBJg3OP8q13uys/qIUTit5NleIYp/vmPWJ/LdrSXER27DKNwD/hqsfZz5Nsays9Mkfb7tOa67MO3BK33oXAcSFjNI8m6uovPS0T84cO/LFY+ok6p46wAENyA5HAkcKrCYr4LNbZ570djN0fYFm1OE9oaRZ2nIMxmcCQWg6GgjKe4aabcWLm7Z6KHENfGGPZ0732djCro6c2sth9Jumzk1cPcce0Nhy70yafxr9E6HjcTtTUf+3h848Pt6K8e0gkEEEGhBFCCM4IVZ6KJiY3h8RIg27tvKazyCSCQscNI0jUQcjhsKmtprO8NObBjzV5ckbwtDBjpChmpHaqQyZg//Bcd57B35NquY9RE9lux5fW8GyYvexe9Xy8Y/VOBU5M+zOOCsOIxxWFkeMWxsjxqYxDWxY1K0rmrnPFNtkza1us77PrpoxnkH7oL+Qp4ohidboxma53Bg80GJ15H2Y2jfV/M08EGJ1vlPtkbGgM5INd7iTUkk6yanxRLo3FFjPdsbzI+SIlnw4ZWyV1PaeY81JCvVCXHwqgrY5sU09EFw0HFe08cmdY37st+lnbNX9+CsVXd5buD8h+iwOBy9WzLWhqGgV8FZr0h57PG2S3rKaXRfAfRkho/Q7MHfI81LU7CAgICAgAoPMsbXCj2hw1OaHDxTZMTNek7EcbWtDWgAAABoFAAMwAGYIiZmZ3l6QcDCXA6C2guxSybRM1tSdjx7YybxrWrJhrf1dDRcSy6Wdo7a+X6eSrrdgVb45TGYa09sPaGEHMQSRwzqnOG8Tts9Rj4ppr0i2/y27WxZ8Bpz9pLGzdV58BTxUxhnxa78Vxx3azP+HTs2BNmb9pM9/ugRj+orOMMeMq9+KZZ7tYj/P6OlZ7hsEeaAOOt7nSeBNPBZRjpHgrW1eov1t9OxJ7DORC1rCWsAOKxpxWgYxyABWad1w9TMzlnfr/p6WTSICAgICDtYNN9J52AcT/wiJZsL2VsUmzFP8xtfCqlEK2UMmnfDMazTDXG/wCAqLdGzFO2Ss/GFSqs9CtPA+XGsMOXKA5p2UkdTworFO7DhauNs1v34Owsld37ovrMyY7BIeTvnxRDvoCAg9iJ33Tvpk4oPDnNHae0bMbGPBtUGJ1riHtOdubTxcfJBideLdEf6nk+AogxOvGTRit3MHM1KDBLaHu7T3He404IOBfNrxJAPwg+JWnJPa6uipvj3+P6OW+8dq1cy7GNhfeO1N2UY2F947VG7KMaX3O6tnjOtteJJ81ap3YcHVfzrercWTQAIMMtrjbkdI0HVjCvDOgx/Tgewx7tzMUcX0QfOtmOaNrdrnlx4NA5oHUyntTU2MYG+JqfFBOrtgayJoaPZFTpOTSdKliwYQsrZJR+Anhl8kFXKGTxOyrHDW1w4tIRMTtMKcVV6RY2BlfoTC3I4OeNhGOTQ8e5b8fdcTWx+NKRRShw1EZwc4KzVXtB27ivQg9W8FzaHFy0IpoqdCIdh15fdjb3ku+QQYnXhLodT3WhvIVQa73l3aJO8k80S8oCAgICCCYa2zFtWLX/AA2eJcquafed/hlN8G/xn8kcfeO1ad3SjGwvvHao3ZRiYH3jtTdlGJadySTfRYQI2j1TPSc/P6Ay4oHmr9O7DyOqnfNf1n7t3qpj2pQNjGAeLqlZNAbAw9suf7zy4cMyDNFAxvZaBuACDIgIAQTlgoANQUsWveTawSDWx3wlBUyhk+szjeiJU3LHiuLToJHA0VV6Ws7xun+AL62QjVI4cWtPmt2Po5GvjbL8khezLVpo4adB2HWFsUmWKXG0UIzt0j5jag3rs+1G4/CUHZQEBAQEGOWdje05o3uA5oMX05nshzvdYacTQeKD518p7MVNr3geDQeaCsOkGR/09wcRUMjHoggdiozk61Sz996nhEf8aPWfujJcda0Ons+ICC97ubSCMao2D+ALp16Q8Nlne9vWfu2FLAQEBAQZLMKvaNbhzQTZSxeXtqCNYogp9QyEFTX2zFtUw/1H/GSq1usvQYJ3x19Et6O5PUyt1Paf1NI/oW3F0lz+IR79Z+CWLY57w9lcoNCMx8iNI2IN655aygEUcAaj905RrCDtyStb2nAbyBzQYfprPZq73WEjjm8UDr5D2YqbXvDfBtUDEmOd7W+6yp4uJ5IPhsYPae9295A4CgQZIrLG3ssA3AIMqAgqLpBP7Sl2CL/YYqOfvy9Zwr+lr8//AKlHVpdAQEF+xNo1o1ADgAF1IeEtO8zL0iBAQEBBtXYKzM94IhMFKBBUdtbSV41PcODioZMKCr8K2Uts3vV4tB81Xv3pd3STvhq7nRy7LONkZ4F481ni8VTiP9vzTRbXNEHuzsBkZXWBUEg0JoRUIO/FZY29lgG2mXigzICAgICAgIKgw+P7Sm/8f+wxUM3fl63hf9LX5/eUfWpfEH1ramg05EJnaH6Akzneea6jwUdHlEiAgICDfuQevb3/AAlEJWpQIKrv1tLVKPxu5qEtFEq2w2ZS3PP3hGf5TRzBVe/edrRTvhj5/dv9Hj/XSjWwHg8fNZYurVxCPdrKdLc5QgyWc+m33hzCCSICAgICAgICCncOT+0Z/eaOEbQqGbvy9dw3+lp+/FwlqXhBtXUzGtETdcjBxeAsq96GrPO2K0/CfsvZxyneuk8PD4iRAQEBB1MHW+urqaURKTKUCCs8Km0tso2g8WNPmoS5KJV/h+z60064x4OcPktGTq6/D5/DmPi84Au+tka43eBafJMfVOv/AJUeqwlvccQeoz6Q3jmgk5QfEBAQEBAQEFNYaH9oT+//AEhc/L35ev4d/TU9HFWtdEHRwbZW22cf60fg8HyWePvQr6ydsF5+E/Zdy6LxYgICAgIOzg0303nYOaIlIVKBBXeGraWx21rT4U8lCYcFEoR0iM9ZCdbXDg4fNacvWHU4dPZZzMC30t0e0SD+U7zAWNO8362PwZ+X3WUrDiCBVBKTnQfEBAQEBAQEFL4XmtvtH5hXPy9+XsdB/TU9HIWtbEHZwObW8LP+YDwBPktmLvwp8QnbTX9FzLoPHiAgICAg72DDcjz7o518lKJdxECCB4et+sMOtnJxUJhGUSh/SKz0YHajIOIYRyK1ZfB0eHT22j0/NHsFXUtsPvU4tI81hTvQuauPwbLRVhwhB8dmQSlAQEBAQEBAKCk8J3Vt1o/Nf4OIXOyd+Xs9FG2np6Q5iwWRB3sBG1vGDe88InnyW3D34UOJztpb/L7wuFX3khAQEBAQSPBtvq3HW7kFKJddECDgYW3MZ48dg9YwZB95ulu/UiYV4oSjHSAytmYdUg8WO+QWvJ0XtBP4k+iHXG/FtUJ/1GeLgPNaq9YdLPG+K3othWXnxAKCTsOQbhyQfUBAQEBAQEFHX8frc/50n+45c6/el7XS/wAinpH2aKwbxBJOjxlbyjOpsp/kvHmt2Dvw53FZ20tvjt94W2rzyggICAgIJRcDaQDaSVKJdJECAgg+GVyYhM8Y9E9sDQT7W481CYVvhuyticdT2Hxp5rDJ3VvRT+NCu7NJiva77rgeBqtDs3jmrMea435zvPNWnm4fESIJLAfQb7o5IPaAgICAgIPrc6IUVe7q2mY65ZD/ABlc2/el7fTxtip6R9mosW4QSzozb9eJ1RPPEtHmt+n77lcYn/jx6x+a01deYEBAQEBBLbnbSBm4ni4lSxluoCAg8yxhzS1wqCKEHMQgp3pPuV0FmmAysIa5jtglZUHaFhk7srWkn8av78FNqu7q5WOqAdYB4iqtPNTG07PqAgkdlPq2+6OQQZUBAQEBAQeo+0N45oieihLY6srzrc48XFcyer3WONqRHwYVDMQTPouZ9akdqipxkZ8lY0/elx+NT+FWPj+UrMVx5sQEBAQEEzsDKRMH4RyUsWdAQEBBysJ7lZbLJLZ3mmO0hr6VLXaHcVExvGzPHfktFvJ+WL5uuazTvs87cWSM0cNGsOB0gggg6iqsxt2PRUvF6xaOkrSu5+NDGdcbD/AFZjo89kja0x8WwpYiCRWL7JnuhBmQEBAQEBB6j7Q3jmiJ6Pz8SuW96ICCddFTfWzn8DRxf/wrOm6y4fG592kfGViq28+ICAgIAQTeJtGgagB4KWL2gICAgIID0r4EC3QdfA36zEPRpkMrM5jOsjKW7ajStd679sLmk1Hs7cs9JQy4DWyQ/ltHe30SPBTXpDVn/mW9W+smoQSC7z6pm7zKDYQEBAQEBB9BQfn9ct7wQEE/6KG/9Sfyhx6z5K1pvFweNz/L+f5LAVpwRAQZYbM93ZYTuGRB0ILikPaIb4lEbujBccQ7VXbzQcApN3URAgICAgICCEYYXCGevhbRpJ6xoFACTXHAGsk12naoTvv1RREiDv3YfUt7/iKDZQEBAQEBB5mNGuOpp5FJTXrCgly3uxAQWN0UxertDtb4x+lsh/qVvTdJee43b36R8J/L9FiwXZM7MwgazkCsuG6MGD/339zfmVJu6EF1wtzMB2n0kRu3ANSD6gICAgICAgICDy9gIIIqDkIOYjUgrbCO5zZ5cn2bsrDzadoUJchEu7dX2Ld7viKDbQEBAQEBBhthpE8/gf8AAVE9GWPvR6x91GWSxyyuxYo3vd91jC88AFzYiZ6PcWvWkb2nZLrp6L7zmoXRthB0yuxTT3WgniFtrgvKhl4rp8fZE7+ibXT0N2ZtDabQ+Q6WsAiZuJNT4hbq6aPGXNy8ayT3KxHr2p5clwWWyMxLNC1gJqc5JNKVLjlK31rFY2hys2fJmtzXneXTWTSICAgICAgICAgICAgINS87AyeIxvzHMdIOghBWFvsb4ZHRvGVvAjQRsUMnUug+qG880G4gICAg2oLvlf2WHecg4lEOhBg+723gbBlUm7oR3NAAQWY1QQcbLUEUI8U2ImYneGxYrDDE3FhiZG0eyxgYOACiIiOjK+S153tMzPxbClgICAgICAgICAgICAgICAgICDiYUXKJ48Zo9Yzs7RpafJBE7oBEZByEOOTuChk3443ONGtJ3CqDfguaZ2cBu8+QRDowXAwdtxOweiFJu6MFjjZ2WAbaVPFEM6AgICAgICAgICAgICAgICAgICAgICAg5bbviM7yWDLRx3kZTTuCDpRxtaKNAG4UQekBAQEBAQEBAQEBAQEBAQEBAQf/2Q=="
    alt="">

  <img class="newImage" id="myimage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg" </body>

答案 1 :(得分：1)

这是我到目前为止所达到的..在Detect the End of CSS Animations and Transitions with JavaScript

的帮助下
  • 您需要创建保存动画的animate类
  • 使用javascript添加此类
  • 使用函数检测CSS动画的结尾
  • 最后，您可以使用.toggle()在图像之间切换

$(document).ready(function(){
  var animationEvent = whichAnimationEvent();
  $(".circle0").addClass("animate");
  $(".circle0").one(animationEvent,
    function(event) {
    $(".img , .newImage").toggle();
    // Do something when the transition ends
  });
});

function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}
.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  position :relative;
  
}
.circle0.animate{
  -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s;
  animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
  display:none;
  position :absolute;
  top:250px
}

@-webkit-keyframes mymove {
  from {top: 0px;}
  to {top: 200px; opacity: 0}
}

/* Standard syntax */
@keyframes mymove {
  /* from {top: 0px;}
  to {top: 250px;opacity: 0.2} */
  0% {
    top: 0px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 250px;
    opacity: .3;
    display:none
  }
}
.img{
  position :absolute;
  top:250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!--   <div class="container">
   -->  <div class="circle0"></div>
<!-- </div>
 -->
  <img class="img" width="100" src="data:image/jpeg;base64,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" alt="">

  <img class="newImage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg"
  </body>
</html>

说实话：简单的方法是在5秒钟后使用setTimeout。如果不是您要找的内容，则可以使用我的答案

答案 2 :(得分：0)

我不认为CSS可以做到这一点，但是jquery可以通过以下代码来做到这一点：

function imgChange(){
setTimeout(function(){ $('.img').attr({'src' : 'insertnewimg'}); }, 5000);
}

function ballTouch(){
//yadda yadda code that makes the ball move and detects when its ina box
if(ballIsInTheBox == true)
imgChange();
 }


ballTouch();

setTimeout使程序在执行其中的代码之前等待x，在这种情况下为5000毫秒（1000毫秒= 1秒），这将更改jQuery中的图像src。祝你好运，让我知道我是否搞砸了。注意：请记住，setTimeout不会停止整个程序，只是会延迟其中的功能。

答案 3 :(得分：0)

这是您问题的实际解决方案：https://jsfiddle.net/t8re0vnk/1/

您可以通过将事件绑定到动画圈来处理此问题。

var element = document.getElementById("circle0");
element.addEventListener("animationend", function() {console.log('zxcxzc'); changeImg();}, false);

function changeImg(){
 document.getElementById("img").src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqcPW3wEJ3qv3zjTkw5DQaDkgmCiTDclMKMVHp9RZ8VJpZkxal9g';
}

HTML：

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <!--   <div class="container">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
       -->  <div id="circle0" class="circle0"></div>
    <!-- </div>
     -->
      <img class="img" width="100"  id="img" src="https://mk0westpacklifeyuwd8.kinstacdn.com/wp-content/uploads/99508-gift-box-small-blue-34284-copy-1.jpg" alt="">

      </body>
    </html>
相关问题
最新问题