Animation css background position

CSS ANIMATIONS (Changing background colors and positions)

I have been learning about CSS basics for sometime now and today, I decided to share what I learnt. I mostly decide to post a blog on the ones I find confusing (sort of helps me to understand better, almost like teaching myself). We are going to be discussing about CSS animations, focusing mainly on background colors and positions.

CSS ANIMATIONS

📌 CSS animations help create moving elements and ‘animations’ in your webpage without the use of JavaScript but mainly CSS. To make a div element (container) move to different places on a webpage and change colors, we have to use something called a keyframe . CSS styles specified inside the keyframe rule would allow the animation to gradually change from a current style, to a new style at a certain time. Lets say we have a scenario where we want to move a box from one point to another of the screen. Whiles the box moves, we want the color to change at a specified time. The timing the box would have to be specified in the keyframe by percentages (this could be explained further in the post). This is when the animation-duration property how long an animation would take to complete. Understanding the animation-duration property and the keyframe would allow you to change colors of an element and also, change their positioning. To make it simpler to understand, just take the animation-duration to be the time your animation would last (could be 10s, 20s or even less depending on your preference). And the keyframe to be a property that tells the box to change a color at a specified time. (If you are lost, don’t be. I am going to give a demonstrative explanation)

Looking at the block of code above, you would realize a ‘webkit. ‘ thingy over there. It is basically the code for safari because, some of the standard CSS properties do not work with the safari (ios) browser. It is advisable to always include it alongside with the standard properties just incase. I stated the animation duration to be 4s (seconds). And the keyframe has some percentages aligned to each background color. This means that, your animation has 4 seconds to run. Within 4 seconds; 📌At 0% (of the 4s, which is the going to be the default color when you run the code), the background color would be red and be at the left side of the screen (because left is set to 0px). 📌At 25%, the background color would then change to the color yellow and put 200px on the left side of the box (this would move the box to the right). 📌At 50%, the background color would change to blue and move downwards to the right because there is 200px for both left and top. 📌At 75%, the background color would change to green and move back to the left downwards because the left is now 0px and top is 200px. Lastly at 100%, it would go back to its original position and color. This block of code above would make the box move in four corners. The importance of the keyframe is to specify the styles you would want to add to your animations.

CONCLUSION

One thing you should always specify is the number of the seconds the animation duration would take. And the percentages is well (in the keyframe). This is because, the default value is always zero (0) so if you forget to indicate the exact time the animation should last, it would not take any effects. Thanks for reading!

Источник

Анимация графического фона на CSS

Если поставить в фон не фотографию, а абстрактную картинку, например с линиями, то эффект будет даже более интересен.

HTML:

CSS:

Смотрите также:

Белый шум на JS

Небольшой JavaScript, создающий белый шум в канвасе

Параллакс эффект при движении мыши

Пример создания простого параллакса, реагирующего на движение курсора мыши

Бегущие волнистые линии

Анимированные волнистые линии с использованием SVG и CSS

Добавить комментарий:

Комментарии:

Приветствую перекопал кучу сайтов, но нифига не нашел, вдруг тут кто подскажет — задача сделать «прилипший» футер на сайте (с этим справился), а вот вторая задача — как фон футера сделать анимированным (через css) никак не выходит . Вдруг есть мыслишка или решение, буду рад помощи ✌️ а сайте у тебя — просто бомба

• Создание и оформление сайтов
  • Тексты, ссылки и кнопки
  • Вкладки, блоки и списки
  • Секции
  • Меню и аккордеоны
  • Модальные окна
  • Слайдеры и карусели
  • Формы
  • Фото, аудио и видео
  • Фоны и паттерны
  • Картинки и иконки
  • Карты и геолокация
  • Прокрутка и скроллбары
  • Весь сайт
  • HostCMS
  • WordPress
  • Фоновые анимации на JS

  

  Источник

  13+ Animated background CSS examples (source code included)

  

  In this post, I will show you some exceptional animated backgrounds. I only used CSS to create those animations. There is no JavaScript involved.

  You’ll see all the demos and also you’ll get the code (HTML & CSS). There is an icon on the top-right edge of each code block. You can click this icon to copy the entire code block.

  1. 1 Animated background examples
     1. 1.1 Example 1
     2. 1.2 Example 2
     3. 1.3 Example 3
     4. 1.4 Example 4
     5. 1.5 Example 5
     6. 1.6 Example 6
     7. 1.7 Example 7
     8. 1.8 Example 8
     9. 1.9 Example 9
     10. 1.10 Example 10
     11. 1.11 Example 11
     12. 1.12 Example 12
     13. 1.13 Example 13
     14. 1.14 Example 14

     Animated background examples

     I used CSS keyframes & animation property to create the background animations. Some of the examples contain images that I created myself or I own them. If you like, you can use them on your projects.

     Example 1

     Example 1: The cow eats grass 🌲

     This is a very simple but eye-catching background example. Aside from the fallback white background, I used three different colors to make the gradient.

     To learn more about the background color, gradient backgrounds, background images, and all sorts of related information & examples, see how to use CSS background. If you need help resizing the background images, see this post after.

     You’ll also see some shining effects and other animation effects in this example. See its HTML & CSS below.

     Example 1: The cow eats grass 🌲
      

     .example-1 < width: 100%; min-height: 400px; background-color: #fff; background-image: linear-gradient(-45deg, #f0f, #00f, #0f0); background-size: 400% 400%; -webkit-animation: gradient-example-1 5s ease infinite; animation: gradient-example-1 5s ease infinite; >@-webkit-keyframes gradient-example-1 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @keyframes gradient-example-1 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >>

     Example 2

     Example 2: It has four legs 🐂

     This background example has a radial gradient along with a pulse and glow effect. The animation property has a 2-second duration ( animation-duration ) but you can change it according to your choice.

     Example 2: It has four legs 🐂
      

     .example-2 < width: 100%; min-height: 400px; background: radial-gradient(ellipse at center, #ff2f2f, #6c0000); -webkit-animation: pulse-example-2 2s linear infinite; animation: pulse-example-2 2s linear infinite; >@-webkit-keyframes pulse-example-2 < 0% < -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; >50% < -webkit-transform: scale(1); transform: scale(1); opacity: 1; >100% < -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; >> @keyframes pulse-example-2 < 0% < -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; >50% < -webkit-transform: scale(1); transform: scale(1); opacity: 1; >100% < -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; >>

     Example 3

     Example 3: I had never seen an alien 👽

     In this example, the background gradient colors are changing from one direction to another.

     Example 3: I had never seen an alien 👽
      

     .example-3 < width: 100%; min-height: 400px; background: linear-gradient(-45deg, #D4145A, #FBB03B, #FF5E3A); background-size: 400% 400%; -webkit-animation: gradient-example-3 8s ease infinite; animation: gradient-example-3 8s ease infinite; >@-webkit-keyframes gradient-example-3 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @keyframes gradient-example-3 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >>

     Example 4

     Example 4: Hi mom! I took money from your vanity bag 😿

     It’s an extended version of the last example. Aside from the background animation, the text also has effects that really look good on human eyes. It can quickly grab visitors’ attention.

     Example 4: Hi mom! I took money from your vanity bag 😿
      

     .example-4 < width: 100%; min-height: 400px; background: linear-gradient(-45deg, #FF5F6D, #FFC371, #FF5F6D, #FFC371); background-size: 400% 400%; -webkit-animation: gradient-example-4 10s ease infinite; animation: gradient-example-4 10s ease infinite; >.example-4 p < color: #fff; text-shadow: 2px 2px 4px #000000; -webkit-animation: glow-example-4 2s ease-in-out infinite alternate; animation: glow-example-4 2s ease-in-out infinite alternate; >@-webkit-keyframes gradient-example-4 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @keyframes gradient-example-4 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @-webkit-keyframes glow-example-4 < 0% < text-shadow: 2px 2px 4px #000000; >100% < text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000; >> @keyframes glow-example-4 < 0% < text-shadow: 2px 2px 4px #000000; >100% < text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000; >>

     Example 5

     Example 5: That’s not quite right 😈

     It’s nearly similar to the last example. However, it’s a bit different based on color combination, glowing effect, animation direction, etc.

     Example 5: That's not quite right 😈
      

     .example-5 < width: 100%; min-height: 400px; background: -webkit-gradient(linear, left top, right top, from(#64B5F6), color-stop(#E57373), color-stop(#FBC02D), to(#4DB6AC)); background: linear-gradient(to right, #64B5F6, #E57373, #FBC02D, #4DB6AC); background-size: 400% 400%; -webkit-animation: gradient-example-5 10s ease infinite; animation: gradient-example-5 10s ease infinite; >.example-5 p < color: #fff; text-shadow: 2px 2px 4px #000000; -webkit-animation: dropshadow-example-5 5s ease infinite alternate; animation: dropshadow-example-5 5s ease infinite alternate; >@-webkit-keyframes gradient-example-5 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @keyframes gradient-example-5 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @-webkit-keyframes dropshadow-example-5 < 0% < text-shadow: 2px 2px 4px #000000; >50% < text-shadow: 6px 6px 10px #000000; >100% < text-shadow: 2px 2px 4px #000000; >> @keyframes dropshadow-example-5 < 0% < text-shadow: 2px 2px 4px #000000; >50% < text-shadow: 6px 6px 10px #000000; >100% < text-shadow: 2px 2px 4px #000000; >>

     Example 6

     Example 6: Five little monkeys are jumping on the bed 🙉

     This is very similar to the 2nd example. However, it’s still different based on colors, animation duration & direction & scale.

     Example 6: Five little monkeys are jumping on the bed 🙉
      

     .example-6 < max-width: 80%; min-height: 400px; background: radial-gradient(circle, #A9A9A9, #000000); -webkit-animation: pulsate-example-6 4s ease-in-out infinite; animation: pulsate-example-6 4s ease-in-out infinite; margin: 90px auto; >.example-6 p < color: #fff; text-shadow: 2px 2px 4px #000000; >@-webkit-keyframes pulsate-example-6 < 0% < -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; >50% < -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.7; >100% < -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; >> @keyframes pulsate-example-6 < 0% < -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; >50% < -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.7; >100% < -webkit-transform: scale(1); transform: scale(1); opacity: 0.5; >>

     Example 7

     Example 7: Hi dad! I won’t go to school today 🐢

     This is the first example that has a background image. Most of the next examples will also have images.

     Anyways, if you take a closer look, you’ll see that this background image has color filtering effects. It really looks very nice.

     Not to mention, I used a different image for mobile (only for this example) but you can use only one image for all screens.

     Example 7: Hi dad! I won't go to school today 🐢
      

     .example-7 < min-height: 400px; background-color: #000; background-image: url("./img/bg-hero-mobile.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-animation: background-anim-example-7 10s linear infinite; animation: background-anim-example-7 10s linear infinite; >@media (min-width: 768px) < .example-7 < background-image: url("./img/bg-hero.png"); >> .example-7 p < color: #fff; text-shadow: 2px 2px 4px #000; >@-webkit-keyframes background-anim-example-7 < 0% < background-size: 120% auto; -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); >50% < background-size: 100% auto; -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >100% < background-size: 120% auto; -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); >> @keyframes background-anim-example-7 < 0% < background-size: 120% auto; -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); >50% < background-size: 100% auto; -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >100% < background-size: 120% auto; -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); >>

     Example 8

     Example 8: Hi sis! I need your old books 📗

     It has a blur effect and at the same time, the background image is moving up & down (infinite loop).

     Example 8: Hi sis! I need your old books 📗
      

     .example-8 < min-height: 400px; background-image: url(./img/isometric-mockup-four.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-animation: background-anim-example-8 10s linear infinite; animation: background-anim-example-8 10s linear infinite; >.example-8 p < color: #fff; text-shadow: 2px 2px 4px #000; >@-webkit-keyframes background-anim-example-8 < 0% < background-position: center; -webkit-filter: blur(0px); filter: blur(0px); >50% < background-position: left top; -webkit-filter: blur(5px); filter: blur(5px); >100% < background-position: right bottom; -webkit-filter: blur(0px); filter: blur(0px); >> @keyframes background-anim-example-8 < 0% < background-position: center; -webkit-filter: blur(0px); filter: blur(0px); >50% < background-position: left top; -webkit-filter: blur(5px); filter: blur(5px); >100% < background-position: right bottom; -webkit-filter: blur(0px); filter: blur(0px); >>

     Example 9

     Example 9: Every deep night I take a bath 🛀

     It has a nice combination of colors. Also, the animation looks very similar to blinking or switching on/off different colors.

     Example 9: Every deep night I take a bath 🛀
      

     .example-9 < width: 100%; min-height: 400px; background: linear-gradient(45deg, #ff8a00, #e52e71), linear-gradient(-45deg, #ffc900, #ff3838), linear-gradient(135deg, #8e2de2, #4a00e0), linear-gradient(-135deg, #08cde9, #006ba1); background-size: 400% 400%; -webkit-animation: background-anim-example-9 1s ease-in-out infinite; animation: background-anim-example-9 1s ease-in-out infinite; >.example-9 p < color: #fff; text-shadow: 2px 2px 4px #000; >@-webkit-keyframes background-anim-example-9 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> @keyframes background-anim-example-9 < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >>

     Example 10

     Example 10: My heart broke when my little cat died 🐱

     This is a moving image in the background. This type of example best suits isometric images or graphics.

     Example 10: My heart broke when my little cat died 🐱
      

     .example-10 < width: 100%; min-height: 400px; background-image: url("./img/isometric-mockup.jpg"); background-size: cover; -webkit-animation: background-anim-example-10 20s linear infinite; animation: background-anim-example-10 20s linear infinite; >.example-10 p < color: #fff; text-shadow: 2px 2px 4px #000; >@-webkit-keyframes background-anim-example-10 < 0% < background-position: 0% 0%; >50% < background-position: 100% 100%; >100% < background-position: 0% 0%; >> @keyframes background-anim-example-10 < 0% < background-position: 0% 0%; >50% < background-position: 100% 100%; >100% < background-position: 0% 0%; >>

     Example 11

     Example 11: I never eat turtles 🐢

     This example is similar to the last one. But it’s still different compared to the animation effect, direction, background-position, etc.

     Example 11: I never eat turtles 🐢
      

     .example-11 < width: 100%; min-height: 400px; background-image: url("./img/isometric-mockup-two.jpg"); background-position: center; background-repeat: no-repeat; -webkit-animation: background-anim-example-11 20s ease-in-out infinite; animation: background-anim-example-11 20s ease-in-out infinite; >.example-11 p < color: #fff; text-shadow: 2px 2px 4px #000; >@-webkit-keyframes background-anim-example-11 < 0% < background-position: 0 0; >50% < background-position: 100% 0; >100% < background-position: 0 0; >> @keyframes background-anim-example-11 < 0% < background-position: 0 0; >50% < background-position: 100% 0; >100% < background-position: 0 0; >>

     Example 12

     Example 12: I have eggplant in my rooftop garden 🍆

     This is very uncommon. Aside from the background animation, there is another (extra) layer that moves from one direction to another (semi-transparent color, ongoing loop).

     Example 12: I have eggplant in my rooftop garden 🍆
      

     .example-12 < min-height: 400px; position: relative; overflow: hidden; >.example-12::before < content: ""; background: url("./img/isometric-mockup-three.jpg") no-repeat center center fixed; background-size: cover; background-position: center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; -webkit-animation: slide-example-12 5s linear infinite; animation: slide-example-12 5s linear infinite; >.example-12 .animated-rectangle < height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), color-stop(50%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.5))); background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.5) 100%); -webkit-animation: rectangle-anim-example-12 5s linear infinite; animation: rectangle-anim-example-12 5s linear infinite; >.example-12 p < color: #fff; text-shadow: 2px 2px 4px #000; z-index: 1; >@-webkit-keyframes rectangle-anim-example-12 < 0% < -webkit-transform: translateX(-100%); transform: translateX(-100%); >100% < -webkit-transform: translateX(100%); transform: translateX(100%); >> @keyframes rectangle-anim-example-12 < 0% < -webkit-transform: translateX(-100%); transform: translateX(-100%); >100% < -webkit-transform: translateX(100%); transform: translateX(100%); >> @-webkit-keyframes slide-example-12 < 0% < -webkit-transform: scale(1.2); transform: scale(1.2); >100% < -webkit-transform: scale(1); transform: scale(1); >> @keyframes slide-example-12 < 0% < -webkit-transform: scale(1.2); transform: scale(1.2); >100% < -webkit-transform: scale(1); transform: scale(1); >>

     Example 13

     Example 13: I lost many umbrellas in my life 🌂

     It changes the background colors in an ease-in-out motion effect. This example has three different colors that change consistently.

     Example 13: I lost many umbrellas in my life 🌂
      

     .example-13 < min-height: 400px; background-color: #4285F4; -webkit-animation: background-animation-example-13 5s ease-in-out infinite; animation: background-animation-example-13 5s ease-in-out infinite; >.example-13 p < color: white; >@-webkit-keyframes background-animation-example-13 < 0% < background-color: #4285F4; >50% < background-color: #EA4335; >100% < background-color: #FBBC05; >> @keyframes background-animation-example-13 < 0% < background-color: #4285F4; >50% < background-color: #EA4335; >100% < background-color: #FBBC05; >>

     Example 14

     It has multiple background images that change frequently. There is a semi-transparent overlay color on top of each background image.

     .example-14 < min-height: 400px; background-color: #4285F4; -webkit-animation: background-animation-example-14 10s ease-in-out infinite; animation: background-animation-example-14 10s ease-in-out infinite; >.example-14 p < color: white; text-shadow: 1px 1px 2px #000000; >@-webkit-keyframes background-animation-example-14 < 0% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(14, 5, 81, 0.7))), url(img/isometric-mockup.jpg) no-repeat; background: linear-gradient(0deg, rgba(14, 5, 81, 0.7)), url(img/isometric-mockup.jpg) no-repeat; >30% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(87, 1, 1, 0.7))), url(img/isometric-mockup-two.jpg) no-repeat; background: linear-gradient(0deg, rgba(87, 1, 1, 0.7)), url(img/isometric-mockup-two.jpg) no-repeat; >60% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(1, 54, 17, 0.5))), url(img/isometric-mockup-three.jpg) no-repeat; background: linear-gradient(0deg, rgba(1, 54, 17, 0.5)), url(img/isometric-mockup-three.jpg) no-repeat; >100% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(87, 2, 82, 0.6))), url(img/isometric-mockup.jpg) no-repeat; background: linear-gradient(0deg, rgba(87, 2, 82, 0.6)), url(img/isometric-mockup.jpg) no-repeat; >> @keyframes background-animation-example-14 < 0% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(14, 5, 81, 0.7))), url(img/isometric-mockup.jpg) no-repeat; background: linear-gradient(0deg, rgba(14, 5, 81, 0.7)), url(img/isometric-mockup.jpg) no-repeat; >30% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(87, 1, 1, 0.7))), url(img/isometric-mockup-two.jpg) no-repeat; background: linear-gradient(0deg, rgba(87, 1, 1, 0.7)), url(img/isometric-mockup-two.jpg) no-repeat; >60% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(1, 54, 17, 0.5))), url(img/isometric-mockup-three.jpg) no-repeat; background: linear-gradient(0deg, rgba(1, 54, 17, 0.5)), url(img/isometric-mockup-three.jpg) no-repeat; >100% < background: -webkit-gradient(linear, left bottom, left top, from(rgba(87, 2, 82, 0.6))), url(img/isometric-mockup.jpg) no-repeat; background: linear-gradient(0deg, rgba(87, 2, 82, 0.6)), url(img/isometric-mockup.jpg) no-repeat; >>

     And it brings me to the end of this post.

     Learn more about CSS backgrounds

     Conclusion

     I created each of these animated background examples from scratch. Even the graphics are either created by me or owned by me.

     I tried my best to give you extraordinary backgrounds. Each of these examples contains a text but it’s not mandatory to have it. You can also check all the demos on my GitHub page.

     You already got all the codes. But if you still need further explanation, you can download the entire project from my GitHub repository.

     

     Alternatively, you can clone it directly from your command line: git clone https://github.com/shihabiiuc/css-animated-background.git

     If you’re familiar with SASS, you can use my SCSS file instead of the CSS.

     You can download all the background images from here.

     Is there anything are you missing? Or do you have any questions? Let me know.

     

     Popular posts

     

     About Shihab

     With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

     At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

     Источник