[CSS] Animacja wjechania z prawej strony Opcje

[SmokAnalog]

Hej potworki,

jak z pomocą samego CSS można osiągnąć efekt typu slide in? Poradziłbym sobie z tym zdaniem, gdybym znał szerokość elementu, ale niestety nie znam. Zależnie od treści, jego szerokość się zmienia.

Najlepiej, gdyby to był element z position fixed i top = 0. Na początku element jest schowany z prawej poza widokiem. Następnie wjeżdża z prawej strony aż jest cały widoczny po prawej. Stoi tak kilka sekund i potem chowa się tam, skąd zaczął, czyli poza ekranem.

Pomóżcie (IMG:style_emoticons/default/smile.gif)

[kujol]

Czy za pomocą samego css'a da się to zrobić to nie wiem, ale znalazłem takie coś może się przyda (IMG:style_emoticons/default/wink.gif)
www.drzewo-wiedzy.pl/?page=artykul&id=187

[SmokAnalog]

Ja to już zrobiłem w jQuery, ale chciałbym w czystym CSS.

[JAVASCRIPT] pobierz, plaintext 
$("#success")
    .css("right", -$("#success").outerWidth() + "px")
    .animate({right: 0}, 800)
    .delay(3000)
    .animate({right: -$("#success").outerWidth() + "px"}, 800);
[JAVASCRIPT] pobierz, plaintext 

[trueblue]

Próbowałeś z wartościami w %?

[kujol]

A próbowałeś z wartością procentową dla translateX()?
kodcss.pl/kurs-css/lekcje/dzial-4/css3-poruszajacy-sie-animowany-tekst

[SmokAnalog]

Pomogli mi na Stack Overflow. Ostatecznie, moja animacja wygląda tak:

[CSS] pobierz, plaintext 
@keyframes slide-right {
  0% {
    transform: translateX(100%);
  }
 
  20% {
    transform: translateX(0);
  }
 
  80% {
    transform: translateX(0);
  }
 
  100% {
    transform: translateX(100%);
  }
}
[CSS] pobierz, plaintext