I use the following code for a text reveal animation but the text is already there before the 3 second delay that I declare. How can I fix this?
.header>span {
animation: slider 3s 3s ease-in;
overflow: hidden;
white-space: nowrap;
}
#keyframes slider {
0% {
max-width: 0%;
border-right: 4px solid #7CDD26;
}
99% {
max-width: 100%;
border-right: 4px solid #7CDD26;
}
100% {
max-width: 100%;
border-right: none;
}
}
<div class="header">
<span>This is some text</span>
</div>
you need at least inline-block (or block) to your span element to be able to use min-width then you need to add min-width:0% initially and add forwards to the animation to keep the last state:
.header>span {
animation: slider 3s 3s ease-in forwards;
overflow: hidden;
white-space: nowrap;
display:inline-block;
max-width: 0%;
}
#keyframes slider {
0% {
max-width: 0%;
border-right: 4px solid #7CDD26;
}
99% {
max-width: 100%;
border-right: 4px solid #7CDD26;
}
100% {
max-width: 100%;
border-right: none
}
}
<div class="header">
<span>This is some text</span>
</div>
Related
i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
I have a simple transform & transition on a div element. However, it doesn't appear to be working on page loads/re-visits.
Really appreciate if I could be directed to a possible solution.
.container {
width: 50%;
text-align: center;
background: #ccff44;
padding: 50px 5px;
border: #000 2px solid;
margin: auto;
transform: translate3D(-50px, 0, 0);
transition: all 2s ease-in;
}
<div class="container">
<p>Main paragraph</p>
</div>
Hello I think what you are looking for is an animation
the transition will not trigger any movement on its own
#keyframes enter {
from {
transform: translateX(-50px);
}
to {
transform: translateX(0px);
}
}
.container {
width: 50%;
text-align: center;
background: #ccff44;
padding: 50px 5px;
border: #000 2px solid;
margin: auto;
animation: enter 2s linear;
}
<div class="container">
<p>Main paragraph</p>
</div>
I'm trying to use CSS animations to create the effect of a light source pointing down on an object, casting a shadow and moving in a circular motion around it. I've created a snippet below to show where I've gotten to so far.
It's sort-of close but at the moment (because I only have 4 keyframes) it's like the light source is moving along a square path. I'd like it to look like it was moving along a circular path.
The only solution I can think of to come close is to add a bunch of more keyframes and create a (for the sake of simplicity) a dodecagon-shaped path, but is there a simpler solution? Is there a type of timing function I could use to ease it into a smoother path? Or could I use some sort of Sass function to automatically calculate the intermediate keyframes?
I should have noted that once I get this working with box-shadows, I'd also like to apply the same method to text-shadows.
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.circle {
width: 200px;
height: 200px;
border-radius: 100%;
background-color: teal;
box-shadow: 50px 50px 5px darkgrey;
animation: orbit-shadow 5s linear infinite;
}
#keyframes orbit-shadow {
0% {
box-shadow: 50px 50px 5px darkgrey;
}
25% {
box-shadow: -50px 50px 5px darkgrey;
}
50% {
box-shadow: -50px -50px 5px darkgrey;
}
75% {
box-shadow: 50px -50px 5px darkgrey;
}
1000% {
box-shadow: 50px 50px 5px darkgrey;
}
}
<div class="container">
<div class="circle"></div>
</div>
You have to consider rotation for this. Use a pseudo element to avoid rotating the main element:
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
position:relative;
z-index:0;
}
.circle {
width: 200px;
height: 200px;
margin:50px;
border-radius: 100%;
background-color: teal;
position:relative;
}
.circle::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border-radius:inherit;
box-shadow: 50px 50px 5px darkgrey;
animation: orbit-shadow 5s linear infinite;
}
#keyframes orbit-shadow {
100% {
transform:rotate(360deg);
}
}
body{
margin:0;
}
<div class="container">
<div class="circle"></div>
</div>
Or you simply rotate the element if you won't have any content:
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
width: 200px;
height: 200px;
border-radius: 100%;
background-color: teal;
box-shadow: 50px 50px 5px darkgrey;
animation: orbit-shadow 5s linear infinite;
}
#keyframes orbit-shadow {
100% {
transform:rotate(360deg);
}
}
body{
margin:0;
}
<div class="container">
<div class="circle"></div>
</div>
Another idea:
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
position:relative;
z-index:0;
}
.circle {
width: 200px;
height: 200px;
margin:50px;
border-radius: 100%;
background-color: teal;
position:relative;
}
.circle::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border-radius:inherit;
background:darkgrey;
filter:blur(5px);
animation: orbit-shadow 5s linear infinite;
}
#keyframes orbit-shadow {
0% {
transform:rotate(0deg) translate(50px);
}
100% {
transform:rotate(360deg) translate(50px);
}
}
body{
margin:0;
}
<div class="container">
<div class="circle"></div>
</div>
You can also do the same for text-shadow with a slightly different animation in order to not rotate the text:
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
position:relative;
font-size:40px;
font-weight:bold;
}
.circle::before,
.circle::after{
content:attr(data-text);
position:relative;
z-index:1;
}
.circle::before {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
color:transparent;
text-shadow:0 0 5px darkgrey;
animation: orbit-shadow 5s linear infinite;
}
/* the 50px is your offset */
#keyframes orbit-shadow {
0% {
transform:rotate(0deg) translate(50px) rotate(0deg);
}
100% {
transform:rotate(360deg) translate(50px) rotate(-360deg);
}
}
body{
margin:0;
}
<div class="container">
<div class="circle" data-text="some text"></div>
</div>
A div with padding can't be made smaller than its padding will allow.
Is this expected behaviour? If so, how can we deal with it?
div {
display: inline-block;
height: 50px;
width: 1px; /* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
#keyframes animate-width {
0% { width: 50px }
50% { width: 1px }
100% { width: 50px }
}
<div></div>
<div style="padding: 0"></div>
A solution is to consider a parent element that you can force to have a width equal to 0 and hide the overflow:
.parent {
display: inline-block;
animation: animate-width 4s ease-in-out infinite;
background:red;
overflow:hidden;
}
.parent > div {
height: 50px;
padding: 10px;
box-sizing: border-box;
background: grey;
min-width:0;
width:100%;
}
#keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px
}
100% {
width: 50px
}
}
<div class="parent"><div></div></div>
<div class="parent"><div style="padding: 0"></div></div>
Yes, that's expected behaviour - padding is a part of an elements dimensions. Re "how can we deal with it": In your particular case, you can also animate the padding:
div {
display: inline-block;
height: 50px;
width: 1px;
/* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
#keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px;
padding: 0;
}
100% {
width: 50px
}
}
<div></div>
<div style="padding: 0"></div>
I have an element which has display none on start. When i add a class to it i want it to fade in, using CSS.
I found this tutorial to use keyframes which is working nice for fade in. But if i want to fade out the same way, the element gets hidden immediately with no animation.
Basically it looks like this:
.box {
display: none;
opacity: 0;
animation: FadeOut 1s ease-in-out;
&.active {
display: block;
opacity: 1;
animation: FadeIn 1s ease-in-out;
}
}
Here is an "working" example:
http://codepen.io/MickL/pen/NAopXN
Trying to animate the display:none is the root of your problem. The confusion for why the fade-in works and the fade-out doesn't comes from the combination of using both display and opacity.
The display property is only being dictated by whether .active is applied; the animations aren't actually changing it, whereas the opacity is animated as expected. On the fade-in, this means that you immediately show your element, which then transitions from transparent to opaque. On the fade-out, this means that you immediately hide your element, which then transitions from opaque to transparent while hidden.
There are a couple different ways you could solve this, but it sort of depends on the context. For example, you could leave it as a block element and use the height property to make it collapse:
$('button').on('click', function(e) {
e.preventDefault();
$(this).siblings('.box').toggleClass('active');
})
#import "bourbon";
* {
box-sizing: border-box;
text-align: center;
}
button {
margin: 30px 0;
border: 1px solid #ccc;
text-align: center;
padding: 1em;
background: none;
box-shadow: none;
}
.box {
margin: 0 auto;
width: 80%;
height: 0;
display: block;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
opacity: 0;
animation: FadeOut 1s ease-in-out;
}
.box.active {
display: block;
height: initial;
opacity: 1;
animation: FadeIn 1s ease-in-out;
}
#keyframes FadeIn {
0% {
opacity: 0;
height: initial;
}
100% {
opacity: 1;
height: initial;
}
}
#keyframes FadeOut {
0% {
opacity: 1;
height: initial;
}
99% {
opacity: 0;
height: initial;
}
100% {
height: 0;
opacity: 0;
height: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
<button class="toggle-good">Toggle display</button>
<p class="box good">I move nicely!</p>
<p>Extra paragraph to show collapse</p>
</div>
You can't animate or transition the display property.
Note: That's not to say you can't use it in keyframe animation but that's not the same as actually animating it.
The reason why your Codepen demo doesn't work as intended is because the .active class is being removed instantly so the animation out has no time to fire and the default display:none is now applied immediately.
Since you are using Jquery anyway, there is a built in function fadeToggle which will do what you want.
$('button').on('click', function(e) {
e.preventDefault();
$(this).siblings('.box').fadeToggle(500);
})
* {
box-sizing: border-box;
text-align: center;
}
button {
margin: 30px 0;
border: 1px solid #ccc;
text-align: center;
padding: 1em;
background: none;
box-shadow: none;
}
.box {
margin: 0 auto;
width: 80%;
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
<button class="toggle-good">Toggle display</button>
<p class="box good">I move nicely!</p>
</div>