Add transition

massam89 · massam89 · commit 794d99690e35 · 2020-12-04T12:33:59.000+03:30
diff --git a/Week1/project/index.css b/Week1/project/index.css
@@ -34,12 +34,12 @@ font-size: 2.2rem;
 margin: 40px 40px;
 position: relative;
 text-align: center;
-animation: slide 0.5s ease-out;
+left: -1000px;
 }
 
-@keyframes slide {
-  0% {margin-left: -600px;}
-  100%{margin-left: 40px;}
+.transition{
+  transform: translate(1000px);
+  transition: transform 1000ms;
 }
 
 
diff --git a/Week1/project/index.html b/Week1/project/index.html
@@ -15,7 +15,7 @@
 <body>
   <div class="container">
     <div class="quote">
-      <blockquote id="quote">Wisely, and slow. They stumble that run fast</blockquote>
+      <blockquote class="transition" id="quote">Wisely, and slow. They stumble that run fast</blockquote>
       <h2 id="author">William Shakespeare</h2>
       <div class="clearFix"></div>
     </div>
diff --git a/Week1/project/index.js b/Week1/project/index.js
@@ -50,6 +50,10 @@ let quoteNum = 0;
 button.addEventListener('click', changeQuote);
 
 function changeQuote() {
+  quote.classList.remove('transition');
+  setTimeout(() => {
+    quote.classList.add('transition');
+  }, 5)
   quote.textContent = quotes[quoteNum].quote;
   author.textContent = quotes[quoteNum].author;
   quoteNum++;
