背景のFadein,outのアニメーションをどのように実現するのか？

前提・実現したいこと

下記リンクのアニメーションを実現したいです。
https://livewp.site/demos/?product=Forty
-背景のFadein,outのアニメーション
-文字が右、左から流れてくるアニメーション

本人はCSS１年未満の初心者となります。
よろしくお願い申し上げます。

2018/06/10 12:21

ブラウザ開発ツールを利用するとどのような指定がされているかとか、それぞれの動きが分かるのですが、そちらは確認してみました？調べたこと、自身でやってみたこと（そのコード）をご提示ください。　https://teratail.com/help/question-tips#questionTips1-2 >投稿前に自分で一度調べてみましょう。そして調べたことを元に、一度は自分でやってみましょう。

行動規範の内容に同意します

回答1件

ベストアンサー

ご参考になるか分かりませんが，背景のフェードインは以下で動きました．

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
6  <script src="s.js"></script>
7  <style>
8    html {
9        background: #777;
10    }
11    body {
12        background: #aaa;
13        width: 100vw;
14        height: 100vh;
15        overflow: hidden;
16    }
17    p {
18        position: absolute;
19        top: 50vh;
20        right: 50%;
21    }
22  </style>
23</head>
24<body>
25  <p>hello</p>
26</body>
27</html>

（外部ファイルとして　s.js　を用意します）

JavaScript
1  //s.js の内容
2$('head').append(
3	'<style>body{display:none;}</style>'
4);
5$(window).on("load", function() {
6	$('body').delay(600).fadeIn("slow");
7});
8