Un utente ha chiesto informazioni su Blask di Wordpress

L’animazione CSS non funziona su iOS

Un utente ha chiesto ๐Ÿ‘‡

Ciao,

Ho modificato l’ombra del riquadro delle immagini sulla pagina del mio portfolio e il mio logo per aggiungere un’animazione al tagliando e al bordo dell’immagine sulla pagina su di me, ma queste animazioni non vengono visualizzate sui dispositivi iOS. Dopo aver cercato su Google, ho scoperto che dovevo aggiungere -webkit- oltre a -webkit-look: nessuno; ma non ha risolto il mio problema.

Ecco la parte rilevante del mio CSS aggiuntivo:

.portfolio-thumbnail a:hover img {
	opacity: .4;
}

.portfolio-thumbnail a:hover:after {
	-webkit-appearance: none;
	animation: mymove 3s infinite;
}

.site-logo:hover {
	-webkit-appearance: none;
	animation: mymove2 3s infinite;
	border-radius: 7em;
}

.border-portrait {
	-webkit-appearance: none;
	animation: mymove3 3s infinite;	
}

@keyframes mymove {
  0%, 100% {box-shadow: 0px 0px 0px 2em inset cyan;}
	33.3% {box-shadow: 0px 0px 0px 2em inset magenta;}
	66.6% {box-shadow: 0px 0px 0px 2em inset yellow;}
}

@keyframes mymove2 {
  0%, 100% {box-shadow: 0px 0px 0px 10em inset cyan;}
	33.3% {box-shadow: 0px 0px 0px 10em inset magenta;}
	66.6% {box-shadow: 0px 0px 0px 10em inset yellow;}
}

@keyframes mymove3 {
  0%, 100% {border: solid cyan 2em;}
	33.3% {border: solid magenta 2em;}
	66.6% {border: solid yellow 2em;}
}

@-webkit-keyframes mymove {
	-webkit-appearance: none;
  0% {-webkit-box-shadow: 0px 0px 0px 2em inset cyan;}
	33.3% {-webkit-box-shadow: 0px 0px 0px 2em inset magenta;}
	66.6% {-webkit-box-shadow: 0px 0px 0px 2em inset yellow;}
	100% {-webkit-box-shadow: 0px 0px 0px 2em inset cyan;}
}

@-webkit-keyframes mymove2 {
	-webkit-appearance: none;
  0% {-webkit-box-shadow: 0px 0px 0px 10em inset cyan;}
	33.3% {-webkit-box-shadow: 0px 0px 0px 10em inset magenta;}
	66.6% {-webkit-box-shadow: 0px 0px 0px 10em inset yellow;}
	100% {-webkit-box-shadow: 0px 0px 0px 10em inset cyan;}
}

@-webkit-keyframes mymove3 {
	-webkit-appearance: none;
  0% {-webkit-border: solid cyan 2em;}
	33.3% {-webkit-border: solid magenta 2em;}
	66.6% {-webkit-border: solid yellow 2em;}
	100% {-webkit-border: solid cyan 2em;}
}

Grazie in anticipo per il vostro aiuto,

Armin

(@fstat)

4 mesi, 4 settimane fa

Ciao,

Ciรฒ che stai descrivendo รจ al di fuori dell’ambito del supporto che possiamo fornire in questo forum. Se hai bisogno di aiuto per modificare il tema, contatta uno sviluppatore professionista.

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *