Bonjour à tous, je développe une page web en react tsx et css pour mon site dans laquelle j'ai mis une animation transform. Cependant l'animation ne se joue pas sur les appareils IOS, même après avoir rajouté " -webkit-animation".
export function Erreur404() {
return (
<div className="erreur">
<div className="top"></div>
<div className="texte">
<img src={peche} alt=""/>
<h1>404</h1>
<h3>Désolé, cette page n'a pas été trouvée...</h3>
<Link to="/"><button>Retour</button></Link>
</div>
<div className="bottom">
<svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
<defs>
<path
id="wave"
d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
fill="purple"
/>
</defs>
<g>
<use href="#wave" />
</g>
<g transform="translate(761 0)">
<use href="#wave" />
</g>
</svg>
<svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
<defs>
<path
id="wave"
d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
fill="purple"
/>
</defs>
<g>
<use href="#wave" />
</g>
<g transform="translate(761 0)">
<use href="#wave" />
</g>
</svg>
<svg className="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
<defs>
<path
id="wave"
d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"
fill="purple"
/>
</defs>
<g>
<use href="#wave" />
</g>
<g transform="translate(761 0)">
<use href="#wave" />
</g>
</svg>
</div>
</div>
);
}
Voici mon code CSS :
* {
margin: 0;
padding: 0;
}
.cursor {
display: block!important;
}
.erreur {
height: 100vh;
overflow-y: hidden;
}
.erreur .top {
width: 100%;
height: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.erreur .texte {
position: absolute;
z-index: 10;
width: 100%;
top: 50%; /* Centre verticalement la div */
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
h1 {
font-size: 350px;
margin: 0;
padding: 0;
font-weight: 1000;
color: #77B5FE;
display: inline-block;
/*text-shadow:*/
/* -5px -5px 0 white, !* ombre en haut à gauche *!*/
/* 5px -5px 0 white, !* ombre en haut à droite *!*/
/* -5px 5px 0 white, !* ombre en bas à gauche *!*/
/* 5px 5px 0 white; !* ombre en bas à droite *!*/
}
h3 {
font-size: 35px;
margin: 0;
padding: 0;
color: #fff;
}
img {
position: absolute;
top: -6%;
width: 690px;
}
button {
font-size: 30px;
margin-top: 50px;
padding: 10px 80px;
font-weight: bold;
border: none;
border-radius: 500px;
color: #77B5FE;
scale: 1;
transition: all .5s;
&:hover {
scale: 1.2;
/*box-shadow: 0 0 40px #24397B;*/
}
}
@media (max-width: 1200px) {
h1 {
font-size: 29vw;
}
h3 {
font-size: 2.9vw;
}
img {
width: 58vw;
}
button {
font-size: 2.5vw;
}
}
@media (max-width: 900px) {
h1 {
font-size: 39vw;
}
h3 {
font-size: 3.5vw;
}
img {
width: 77vw;
}
button {
font-size: 3.5vw;
}
}
}
.erreur .bottom {
width: 100%;
height: 50%;
background-color: #77B5FE;
position: relative;
}
.erreur .wave {
position: absolute;
top: -10%;
right: 0;
height: calc(var(--height, 0) * 1.5vh);
width: calc(var(--width, 0) * 1vw);
-webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear!important;
-ms-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear!important;
animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
}
.erreur .wave:nth-of-type(1) {
--speed: 60;
--opacity: 0.3;
--height: 12;
--width: 320;
--lightness: 90;
--rise: 2;
}
.erreur .wave:nth-of-type(2) {
--speed: 30;
--opacity: 0.6;
--height: 10;
--width: 200;
--lightness: 95;
--rise: 5;
}
.erreur .wave:nth-of-type(3) {
--speed: 18;
--opacity: 1;
--height: 6;
--width: 180;
--lightness: 100;
--rise: 0;
}
.erreur .wave path {
fill: hsl(212, 99%, 73%);
opacity: var(--opacity);
-webkit-animation: wave calc(var(--speed, 0) * 1s) infinite linear!important;
-ms-animation: wave calc(var(--speed, 0) * 1s) infinite linear!important;
animation: wave calc(var(--speed, 0) * 1s) infinite linear;
}
@-webkit-keyframes wave {
to {
-webkit-transform: translateX(-761px)!important;
-ms-transform: translateX(-761px)!important;
transform: translateX(-761px);
}
}
@-webkit-keyframes rise {
50% {
-webkit-transform: translateY(-10px)!important;
-ms-transform: translateY(-10px)!important;
transform: translateY(-10px);
}
}
Merci par avance
Afficher la suite
16 août 2024 à 19:32
Bonjour, j'ai bien rajouté le code que vous avez envoyé, cependant cela ne fonctionne toujours pas.
.erreur .wave { position: absolute; top: -10%; right: 0; height: calc(var(--height, 0) * 1.5vh); width: calc(var(--width, 0) * 1vw); -webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear; animation: rise calc(var(--speed, 0) * 1.5s) infinite linear; transform: translate(0, 0); -webkit-transform: translate(0, 0); will-change: transform; }Par ailleurs je voulais préciser ne cela ne fonctionne pas sur les appareils IOS, que ce soit sur safari ou même google chrome. C'est pour cela que je n'arrive pas à comprendre la provenance du problème