add css effect

prosopopee/themes/exposure/static/css/style-page.css

@@ -614,3 +614,44 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+@keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+@-webkit-keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+.animated {
+	animation-delay: 0.5s;
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+	opacity: 0
+}
+
+.fadeInUp {
+	opacity: 0;
+	animation-name: fadeInUp;
+	-webkit-animation-name: fadeInUp;
+}
+

prosopopee/themes/exposure/templates/sections/full-picture.html

@@ -6,7 +6,7 @@
   <div class="video-container">
     {% if section.text %}
     <div class="title-container">
-      <div class="headline">
+      <div class="headline animated animatedFadeInUp fadeInUp">
         <h1>{{ section.text.title }}</h1>
         <h2>{{ section.text.sub_title }}</h2>
         {% if section.text.date_end %}
@@ -30,7 +30,7 @@
 <section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover transparent;">
   {% if section.text %}
   <div class="picture-text">
-    <div class="picture-text-column">
+    <div class="picture-text-column animated animatedFadeInUp fadeInUp">
       <h1>{{ section.text.title }}</h1>
       <h2>{{ section.text.sub_title }}</h2>
       {% if section.text.date_end %}