teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

scssをcssに変更

2018/04/21 00:43

投稿

Usagino
Usagino

スコア12

title CHANGED
File without changes
body CHANGED
@@ -48,57 +48,56 @@
48
48
 
49
49
 
50
50
  #### スタイルシート(sass)はこちら
51
- ```CSS:style.scss
51
+ ```CSS:style.css
52
52
 
53
- $zoomdelay:3s;
54
- .svg_wrap{
53
+ .svg_wrap {
55
54
  text-align: center;
56
55
  margin-top: 40vh;
57
- svg{
58
- width: 50vw;
59
- height: auto;
60
- animation: zoom 2s;
61
- animation-delay: $zoomdelay;
62
- animation-fill-mode: forwards;
63
- path{
64
- fill:#000;
65
- fill-opacity: 0;
66
- stroke:#000;
67
- stroke-width:1px;
68
- animation: path $zoomdelay;
69
- animation-fill-mode: forwards;
70
- }
71
- }
72
56
  }
73
57
 
58
+ .svg_wrap svg {
59
+ width: 50vw;
60
+ height: auto;
61
+ animation: zoom 2s;
62
+ animation-delay: 3s;
63
+ animation-fill-mode: forwards;
64
+ }
74
65
 
66
+ .svg_wrap svg path {
67
+ fill: #000;
68
+ fill-opacity: 0;
69
+ stroke: #000;
70
+ stroke-width: 1px;
71
+ animation: path 3s;
72
+ animation-fill-mode: forwards;
73
+ }
74
+
75
75
  @keyframes path {
76
76
  0% {
77
77
  stroke-dasharray: 1;
78
78
  stroke-dashoffset: 1;
79
- fill-opacity:0;
79
+ fill-opacity: 0;
80
80
  }
81
- 50%{
81
+ 50% {
82
82
  stroke-dashoffset: 50;
83
- fill-opacity:0;
83
+ fill-opacity: 0;
84
-
85
84
  }
86
85
  100% {
87
86
  stroke-dasharray: 1000;
88
87
  stroke-dashoffset: 1000;
89
- fill-opacity:1;
88
+ fill-opacity: 1;
90
89
  }
91
90
  }
91
+
92
- @keyframes zoom{
92
+ @keyframes zoom {
93
- 0%{
93
+ 0% {
94
94
  opacity: 1;
95
- transform:scale(1,1)
95
+ transform: scale(1, 1);
96
96
  }
97
- 100%{
97
+ 100% {
98
98
  opacity: 0;
99
99
  display: none;
100
- transform:scale(3,3)
100
+ transform: scale(3, 3);
101
-
102
101
  }
103
102
  }
104
103
 

1

gifの表示..

2018/04/21 00:43

投稿

Usagino
Usagino

スコア12

title CHANGED
File without changes
body CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  さて今回私が作ったこれ
6
6
 
7
- ![alt gif](https://media.giphy.com/media/B1KK0P6t6JIhH6ZHR1/giphy.gif)
7
+ ![gif](https://media.giphy.com/media/B1KK0P6t6JIhH6ZHR1/giphy.gif)
8
8
 
9
9
 
10
+
10
11
  Hello,worldがヒュンヒュンヒュンと出てきてふわぁって消えるアニメーションです。
11
12
 
12
13
  ですが、なぜかこれふわあって消えた後に画面の横のスクロールサイズが大きくなってしまってスクロールできるようになってしまうんですよ...