質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

アニメーションのcssが表示されません(アニメーションにならない)。

ghtew2
ghtew2

総合スコア159

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

251閲覧

投稿2022/01/05 08:17

アニメーションを作成したいのですが、アニメーションの見本のソースコードを見つけたのですが、
全然効果が適応されません。

参考したのは、以下のサイトです。サイトをスクロースして一番下から2番目のアニメーション「すっとやってくるスライド」の例
のコードをそのままコピー
したのですが、付属画像のように全然アニメーションにならないです。
オシャレなアニメーションのスライドショーをCSSコピペで実装!

なぜでしょうか?
付属画像
イメージ説明

html

<!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>電話予約の入力画面</title> <link rel="stylesheet" href="animation1.css"> <script src="animation1.js"></script> <script src="jquery-3.6.0.min.js"></script> <style> </style> </head> <body> <div class="slideshow"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> <div class="slide">Slide 4</div> <div class="dot-cont"> <div class="dot" onclick="clickChangeSlide(0)"></div> <div class="dot" onclick="clickChangeSlide(1)"></div> <div class="dot" onclick="clickChangeSlide(2)"></div> <div class="dot" onclick="clickChangeSlide(3)"></div> </div> <button class="arrow-button left-arrow" onclick="clickChangeSlide(i-1)">&#60;</button> <button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">&#62;</button> </div> </body> </html>

animation1css

css

*{ box-sizing: border-box; } body{ margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .slideshow{ display: flex; position: relative; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: black; } .slide{ position: absolute; width: 100vw; height: 100vh; display: none; z-index: 1; font-size: 100px; font-family: 'Staatliches', cursive; align-items: center; justify-content: center; box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.3); } .slide:nth-of-type(1){ background: rgb(0,175,175); } .slide:nth-of-type(2){ background: rgb(255,100,100); } .slide:nth-of-type(3){ background: rgb(0,100,220); } .slide:nth-of-type(4){ background: rgb(255,200,100); } .active-slide{ z-index: 10; display: flex; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5); animation: slideIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards; } .prev-slide{ display: flex; } .dot-cont{ position: absolute; z-index: 11; bottom: 5px; width: 100px; height: 20px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); border-radius: 10px; } .dot{ margin: 3px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); } .dot:hover{ cursor: pointer; background: white; } .active-dot{ background: rgba(255,255,255,0.9); animation: fadeIn 1s cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards; } .arrow-button{ position: absolute; z-index: 11; background: rgba(0,0,0,0.5); border: none; outline: none; cursor: pointer; color: rgba(255,255,255,0.5); font-size: 20px; font-weight: bold; } .arrow-button:hover{ color: rgba(255,255,255,1); } .left-arrow{ left: 0; } .right-arrow{ right: 0; } @keyframes slideIn{ 0%{ transform: translate(-100vw, 0); } 100%{ transform: translate(0, 0); } } @keyframes fadeIn{ 0%{ background: rgba(255,255,255,0.5); } 100%{ background: rgba(255,255,255,0.9); } }

animatoin1.js

js

let i = -1; let time = 3000; let slideTimer; let slides = document.getElementsByClassName('slide'); let slideDots = document.getElementsByClassName('dot'); function clickChangeSlide(n){ clearTimeout(slideTimer); console.log(n); changeSlide(n, true); } function changeSlide(n = i, manual = false){ for(let j = 0; j < slides.length; j++){ if(j == i) { slides[j].classList.add('prev-slide'); slides[j].classList.remove('active-slide'); slideDots[j].classList.remove('active-dot'); continue; } slideDots[j].classList.remove('active-dot'); slides[j].classList.remove('prev-slide'); slides[j].classList.remove('active-slide'); } if(manual){ if(n < 0) i = slides.length - 1 else if(n > slides.length - 1) i = 0 else i = n }else i = i < slides.length - 1 ? i+1 : 0; slides[i].classList.add('active-slide'); slideDots[i].classList.add('active-dot'); slideTimer = setTimeout('changeSlide()', time); } window.onload = changeSlide();

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。