- Этот код работает на Chrome даже без webkit, но не Safari. Не могу понять, почему не Safari?
- Я также хотел бы случайным образом изменить фоновое изображение из папки изображений, в которую постоянно добавляются изображения. Он должен меняться каждый раз, когда запускается счетчик-итераций анимации. Я знаю, что мне понадобится javascript, но мои знания о javascript ограничены.
CSS
<style>
#pic1{
width: 320px;
height: 577px;
position: absolute;
margin: 5px 15px 15px 15px;
border-color: whitesmoke;
border-style: groove;
border-width: 3px;
animation-name: go1;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: go1;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-ms-animation-name: go1;
-ms-animation-duration: 15s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
background-repeat: no-repeat;
background-image: url(myimage.jpg);
z-index: 1;}
@keyframes go1 {
from{transform: scale(0) translate(-800px, 2000px)}
to{transform: scale(1) translate(1900px, -500px)}}
@-webkit-keyframes go1 {
from{-webkit-transform: scale(0) translate(-800px, 2000px)}
to{-webkit-transform: scale(1) translate(1900px, -500px)}}
@-ms-keyframes go1 {
from{-ms-transform: scale(0) translate(-800px, 2000px)}
to{-ms-transform: scale(1) translate(1900px, -500px)}}
</style>
HTML
<body style="background-color: black">
<div id="pic1"></div>
</body>