🎉 Animations

Animations

README.md

@@ -7,3 +7,5 @@
 3. [Extending Styles](https://github.com/SaishJ/React-Styled-Components/commit/6c74b72b296bb137495adde146e970d71a2620c2)
 
 4. [Pseudo Classes](https://github.com/SaishJ/React-Styled-Components/commit/a7d2d4c83ccb1b9a8989666e90ed46d65eaeba82)
+
+5. [Pass Props and Adding Attributes](https://github.com/SaishJ/React-Styled-Components/commit/8f539b92b7f699a2b25d967373270eae1da6e7ea)

src/App.js

@@ -1,6 +1,8 @@
 import "./App.css";
+import logo from "./logo.svg";
 // import styled from "styled-components";
 import StyledButton, { FancyButton, SubmitButton } from "./components/Button";
+import { AnimatedLogo } from "./components/Button.styles";
 
 // const StyledButton = styled.button`
 //   border: 2px solid #4caf50;
@@ -19,6 +21,10 @@ import StyledButton, { FancyButton, SubmitButton } from "./components/Button";
 function App() {
   return (
     <div className="App">
+      <AnimatedLogo src={logo} />
+      <div>
+        <br />
+      </div>
       <StyledButton type="submit">Styled Button</StyledButton>
       <div>
         <br />

src/components/Button.styles.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
 export const StyledButton = styled.button`
   border: 2px solid #4caf50;
@@ -36,3 +36,18 @@ export const SubmitButton = styled(StyledButton).attrs({
     transform: translateY(4px);
   }
 `;
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(360deg)
+  }
+`;
+
+export const AnimatedLogo = styled.img`
+  height: 40vmin;
+  pointer-events: none;
+  animation: ${rotate} infinite 20s linear;
+`;