├── README.md ├── gifs ├── demo.gif ├── onroad.gif └── search1.gif ├── night-animation ├── index.html └── style.css ├── onroad-animated ├── clipart.png ├── coolveticarg.ttf ├── onroad.html ├── style.css └── wheel2.png └── search-box1 ├── search-box1.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Animations 2 | Animations with HTML and CSS 3 | 4 | ### Night animation 5 | 6 | ![](gifs/demo.gif) 7 | 8 | ### Search box animation 9 | 10 | ![](gifs/search1.gif) 11 | 12 | ### ONROAD text animation 13 | 14 | ![](gifs/onroad.gif) 15 | -------------------------------------------------------------------------------- /gifs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/gifs/demo.gif -------------------------------------------------------------------------------- /gifs/onroad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/gifs/onroad.gif -------------------------------------------------------------------------------- /gifs/search1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/gifs/search1.gif -------------------------------------------------------------------------------- /night-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Night Animation 4 | 5 | 6 | 7 |

Night Animation

8 |

9 |

10 |

11 |

12 |

13 |

14 |

15 |

16 |

17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /night-animation/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: white; 3 | background-color: rgb(1, 34, 41); 4 | font-family: sans-serif; 5 | text-align: center; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | h1{ 11 | margin-top: 10px; 12 | } 13 | 14 | .animation{ 15 | margin: 0; 16 | padding: 0; 17 | width: 100%; 18 | height: 100%; 19 | text-align: center; 20 | transform: translateY(-68px) rotateX(70deg); 21 | } 22 | 23 | .moon{ 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | margin: -52px auto 0 auto; 29 | height: 100px; 30 | width: 100px; 31 | border-radius: 150px; 32 | background-color: rgb(255, 239, 223); 33 | border: 2px solid rgb(255, 239, 223);; 34 | animation: moon-moving 5s linear infinite reverse; 35 | } 36 | 37 | .river{ 38 | position: absolute; 39 | top: 50%; 40 | left: 50%; 41 | transform: translateX(-50%); 42 | margin: 0 auto; 43 | background-color: #3498db; 44 | border: 5px solid #2980b9; 45 | animation: river-moving 4s linear infinite; 46 | } 47 | 48 | .r2{ 49 | animation-delay: 0.5s; 50 | } 51 | 52 | .r3{ 53 | animation-delay: 1.5s; 54 | } 55 | 56 | .r4{ 57 | animation-delay: 2.5s; 58 | } 59 | 60 | .r5{ 61 | animation-delay: 3.5s; 62 | } 63 | 64 | @keyframes river-moving{ 65 | from{ 66 | height: 0px; 67 | width: 0px; 68 | border-radius: 0px; 69 | } 70 | 71 | to{ 72 | height: 30em; 73 | width: 30em; 74 | border-radius: 30em; 75 | opacity: 0; 76 | box-shadow: 0px 30px 50px 30px rgba(40, 128, 185, .5); 77 | } 78 | } 79 | 80 | @keyframes moon-moving{ 81 | 0% { 82 | box-shadow: inset 100px 0px 0px 7px rgb(254, 225, 207), 0px 0px 25px 25px rgba(254, 225, 207, .2), 0px 0px 50px 50px rgba(254, 225, 207, .15); 83 | } 84 | 85 | 100% { 86 | box-shadow: inset -100px 0px 0px 7px rgb(254, 225, 207), 0px 0px 25px 25px rgba(254, 225, 207, .2), 0px 0px 50px 50px rgba(254, 225, 207, .15); 87 | } 88 | } 89 | 90 | @media only screen and (max-width: 600px) { 91 | @keyframes river-moving{ 92 | from{ 93 | height: 0px; 94 | width: 0px; 95 | border-radius: 100%; 96 | } 97 | 98 | to{ 99 | height: 40%; 100 | width: 70%; 101 | border-radius: 100%; 102 | opacity: 0; 103 | box-shadow: 0px 30px 50px 30px rgba(40, 128, 185, .5); 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /onroad-animated/clipart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/onroad-animated/clipart.png -------------------------------------------------------------------------------- /onroad-animated/coolveticarg.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/onroad-animated/coolveticarg.ttf -------------------------------------------------------------------------------- /onroad-animated/onroad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ONROAD 4 | 5 | 6 | 7 |

ONRAD

8 |

ONRAD

9 | 10 | 11 | -------------------------------------------------------------------------------- /onroad-animated/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: coolveticarg; 3 | src: url('coolveticarg.ttf'); 4 | } 5 | 6 | body{ 7 | background-color: #fff; 8 | } 9 | 10 | .logo, .logo-under{ 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | font-family: "coolveticarg"; 16 | font-size: 100px; 17 | animation: road 10s linear infinite alternate; 18 | } 19 | 20 | .logo{ 21 | color: #ffffff36; 22 | background-image: url(clipart.png); 23 | -webkit-background-clip: text; 24 | background-size: cover; 25 | } 26 | 27 | .logo-under{ 28 | z-index: -1; 29 | color: #0984e3; 30 | } 31 | 32 | .wheel{ 33 | height: 70px; 34 | animation: wheel 10s linear infinite alternate; 35 | } 36 | 37 | @keyframes road { 38 | from { 39 | background-position: left 0 top -30px; 40 | } 41 | to { 42 | background-position: left 500px top -30px;; 43 | } 44 | } 45 | 46 | @keyframes wheel{ 47 | to{ 48 | transform: rotate(720deg); 49 | } 50 | } -------------------------------------------------------------------------------- /onroad-animated/wheel2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonyleme/CSS-Animations/35020e7f546014435529352afe1610a4a3cb9978/onroad-animated/wheel2.png -------------------------------------------------------------------------------- /search-box1/search-box1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Search box 4 | 5 | 6 | 7 | 8 |

9 | 10 | 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /search-box1/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #ee5253; 3 | font-family: sans-serif; 4 | } 5 | 6 | .search{ 7 | background-color: #222f3e; 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | border-radius: 20px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .search-txt, .search-btn{ 19 | transition: 0.8s; 20 | outline: none; 21 | padding: 0; 22 | border: none; 23 | background: none; 24 | } 25 | 26 | .search-txt{ 27 | color: white; 28 | width: 0; 29 | float: left; 30 | } 31 | 32 | .search-btn{ 33 | border-radius: 40px; 34 | color: #ee5253; 35 | width: 40px; 36 | height: 40px; 37 | } 38 | 39 | .search-btn:active{ 40 | background-color: rgba(255,255,255,.5); 41 | } 42 | 43 | .search:hover > .search-txt{ 44 | width: 200px; 45 | padding: 10px; 46 | } 47 | 48 | .search:hover > .search-btn{ 49 | transform: rotate(360deg); 50 | } 51 | 52 | button::-moz-focus-inner { 53 | border: 0; 54 | } 55 | --------------------------------------------------------------------------------