I need to overlap an SVG element's top and bottom with FlexBox items so that the space between them is gone.
What I've tried:
Added a z-index of 1 to the FlexBox items but that didn't do anything.
Added a z-index of -1 to the SVG element but that only hid the element entirely, which is not what I wanted.
Here's my code:
// Lottie returns an SVG with class wrapper.
const defaultOptions = {
loop: false,
autoplay: true,
animationData: balanceData.default,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
className: 'wrapper'
}
};
// home.js
<div className="message">
<div className="txt-1">Find
</div>
<Lottie options={defaultOptions}
height={510}
width={310}
/>
<div className="txt-2">with your</div>
<div className="txt-3">body & mind.</div>
// home.css
.message {
font-family: 'Roboto', sans-serif;
font-size: 6em;
align-items: center;
display: flex;
padding-left: 60px;
padding-top: 60px;
flex-direction: column;
}
.txt-1 {
opacity: 0;
animation-name: txt-1;
animation-duration: 2s;
animation-delay: .5s;
animation-fill-mode: forwards;
display: flex;
align-items: center;
}
.wrapper {
z-index: 1;
}
#keyframes txt-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.txt-2 {
opacity: 0;
animation-name: txt-2;
animation-duration: 1.5s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes txt-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.txt-3 {
opacity: 0;
animation-name: txt-3;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
#keyframes txt-3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Again, all I want is for space between the FlexBox items and SVG element to be hidden:
Figured it out! Just had to remove align-items: center; from .message and add the following to .wrapper:
.wrapper {
padding-left: 5%;
width: 90% !important;
display: flex !important;
}
to make my UI look like:
Note: I'm well aware it's highly suggested to only use !important in either utility cases or user stylesheets. But the library I'm using to render my SVG doesn't allow me to change their stylesheet, so I feel this is a justified use-case of it.
Related
Having an issue with an image when upon the image finishes its animation and is filled in forwards, it's opacity is lower than if i just load the image normally (with the animations taken out)
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
}
.header-container .col-2 img {
opacity: 0; //
animation: 0.5 header ease 1.25s; // these three lines seem to be the problem
animation-fill-mode: forwards; //
}
#keyframes header {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
I have looked at the styles on my browser (chrome) and can't work out why this is happening
In the image is what the difference looks like + chrome styles
img on right has slightly lower opacity
Thanks for any suggestions / help
animation: 0.5 header ease 1.25s;
the 0.5 without the time unit is interpreted as the animation-iteration-count which, if set to 0.5 means: "Run my animation halfways."
What you want is: name, duration, easing, delay, fill-mode use:
animation: header 0.5s ease 1.25s forwards;
and use the s or ms unit for the duration value.
Here's a reminder for the Animation shorthand order:
name, duration, easing, delay, iteration-count, direction, fill-mode
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
background: url("https://placehold.it/100x100/00f");
}
.header-container .col-2 img {
opacity: 0;
animation: header 0.5s ease 1.25s forwards;
}
#keyframes header {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="header-container">
<div class="col-2">
<img src="https://placehold.it/200x200/f00" alt="Test">
</div>
</div>
The code below is a part of my code :
.myBox:hover::after {
animation-name: underline;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
It works nicley, but I want to do it vice versa when animation completed, I mean when it finished then width should be 0 again, In fact for this part I want to do it when my element is not hovered. Which property can help me ?
You need to use alternate and run 2 iterations of the animation:
.box {
height:200px;
background:red;
animation: underline 500ms alternate 2 forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
<div class="box">
</div>
Or consider the use of transition if you want the effect on hover:
.box {
height: 200px;
background: red;
width: 0;
transition: 500ms;
}
body:hover .box {
width: 100%;
}
<div class="box">
</div>
You can specify multiple values for animations rather then from and to using percentage:
#keyframes underline {
0%, 100% { width: 0; }
50% { width: 100%; }
}
More detailed information can be found here.
.myBox:hover::after {
animation-name: underline infinite;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
You infinite for this
Their is bit complications but I think it isn't possible to do what I want with just CSS3 alone.
I have three images in header, I want images to show up with fade-in fade-out effect by using opacity in CSS animation.
I was thinking what if I could select nested elements in animation and animate them. Creating chain animation is bit difficult.
Try using transition-delay property to delay the animation.
Simply apply animation rules to your images. Using animation-delay a chain effect can be produced.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
background-color: #000;
}
img {
margin: auto;
width: 33.333%;
opacity: 0;
animation-name: fade;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes fade {
50% {
opacity: 1;
}
}
img:nth-child( 2 ) {
animation-delay: 0.5s;
}
img:nth-child( 3 ) {
animation-delay: 1s;
}
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
<img src="http://i.imgur.com/iyzGnF9.jpg">
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
I am working on an exercise about CSS 3 animation. I am stuck on how to keep the item falling down the page at full speed without requiring the user to follow it down with the mouse without resorting to javascript. So just when you hover the mouse over the box the box will fall down.
Here is my code:
<p class="exp9"><strong>box</strong></p>
strong {
margin-top: 20em;
}
p:hover strong {
display: block;
}
p:hover strong:hover {
margin-top: 20em;
}
My code just make the text inside the box drop down. Any idea? Thank you
Use this
/*newly added items start faded out and translated 400px upwards on the y-axis*/
li.new-item {
opacity: 0;
animation: new-item-animation .3s linear forwards;
}
#keyframes new-item-animation {
from {
opacity: 0;
transform: translateY(-400px);
}
to {
opacity: 1;
transform : translateY(0);
}
}
Here is an example of what you can do:
<div class="box">
<p class="innerbox">
Hover
</p>
</div>
CSS:
.innerbox
{
Width:150px;
height:20px;
background-color: lightBlue;
Text-align: center;
Padding:10px 0px;
}
.box
{
Display:inline-block;
Transition: 0.3s 0s All linear;
}
.box:hover
{
Padding-top:20em;
}
In the context of your HTML:
strong
{
Text-align: center; /* this makes it more aesthetic */
Padding:10px 20px; /* this makes the text more easy to hover over */
}
p
{
Display: inline-block; /* this is so the box doesn't stretch the width of the page */
Transition: 0.3s 0s all linear;
}
p:hover
{
padding-top: 20em;
}
Not sure if this is the result you want.
p{
width: max-content; /*add this if you don't want the paragraph to take the whole width*/
}
p strong{
display: block;
}
p:hover strong{
animation: fall .1s linear forwards;
}
#keyframes fall{
0%{
transform: translateY(0);
}
100%{
transform: translateY(20em);
}
}
<p class="exp9"><strong>box</strong></p>