split animations for text and background into 2 separate keyframe animations

This commit is contained in:
imohkay 2021-10-22 17:31:38 +05:30
parent de2b0d9064
commit 4f625793d0
6 changed files with 21 additions and 8 deletions

View file

@ -91,7 +91,7 @@ main > .film {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fadeIn 1s linear 0.4s forwards;
animation: fade_in 1s linear 0.4s forwards;
opacity: 0;
}

View file

@ -13,20 +13,33 @@
@keyframes background_animation {
0%,100% {
background-position: 0 0;
//color: #ddd;
}
50% {
background-position: 100% 0;
//color: #000;
}
}
@keyframes text_animation {
0%,100% {
color: #ddd;
}
50% {
color: #000;
}
}
body.animated {
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
animation: background_animation 60s ease-in-out infinite;
background-size: 400% 100%;
}
body.animated-text {
animation: text_animation 60s ease-in-out infinite;
}
body {
color: #ddd;
font-family: "noto_sans", sans-serif;
@ -52,7 +65,7 @@ nav {
}
// Animations: Fade In
@keyframes fadeIn {
@keyframes fade_in {
0% {
opacity: 0;
}

2
app/templates/films.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block body_class%}animated{% endblock %}
{% block body_class%}animated animated-text{% endblock %}
{% block main %}
<div class="films">
{% for film in films %}

2
app/templates/index.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block body_class%}animated{% endblock %}
{% block body_class%}animated animated-text{% endblock %}
{% block main %}
<div class="index">
Phantasmapolis<br>

2
app/templates/page.html Normal file → Executable file
View file

@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block title %}{{ page.title }} Phantas.ma/polis{% endblock title %}
{% block body_class%}animated{% endblock %}
{% block body_class%}animated animated-text{% endblock %}
{% block main %}
<div class="page {{ page.slug }}">
{{ page.body | safe }}

2
app/templates/texts.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block body_class%}animated{% endblock %}
{% block body_class%}animated animated-text{% endblock %}
{% block main %}
<div class="texts">