I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
Any idea why it's happening? I appreciate any and all help. I'm new to html and css so maybe im making a simple mistake here.
I have several columns that move up and down with images loaded locally into the columns. The images shuffle every 6 minutes. The outline around the images flickers as they move up and down the screen. The issue goes away if I remove the outline. I have no idea whats going on.
::-webkit-scrollbar {
display: none;
}
html {
height: 100vh;
height:100%
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
scroll: no;
overflow: hidden;
}
.main {
display: flex;
overflow: hidden;
min-height: 50vw;
background: #333;
}
.main img {
border-radius: 6px;
max-width: 100%;
vertical-align: middle;
outline: 1px solid white;
box-sizing: border-box;
##filter: blur(0.03rem);
opacity: .75;
outline-offset: -3px;
padding: 3px;
overflow: hidden;
}
.main:hover img {
##filter: blur(0.03rem);
opacity: .75;
transition: all 10s;
}
.main img:hover {
##filter: blur(0);
filter: drop-shadow(0 0 0.75rem black);
opacity: 1;
transition: all .2s
}
.main .single-column {
-webkit-animation: var(--animation, none) 360s linear 0.01s infinite;
}
.main .single-column:hover {
animation-play-state: paused;
}
.main .single-column:nth-of-type(odd) {
vertical-align:top;
align-self: flex-end;
--direction: 15%;
}
#keyframes slide {
to {
-webkit-transform: translateY(var(--direction, -15%));
}
So I'm doing this for some lines on my webpage.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 100%;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>
As of right now, the animation on .slant-decor works fine, however - as you can see, it causes a kind of a weird effect on the lines. What I'd like to achieve is that the animation follow the skew angle aswell, creating an effect where the lines would slide in from the top of the page, at the right angle. How could I achieve this?
If my understanding is correct, setting a transform-origin: right top would produce the effect that you are looking for. The default value for transform-origin is 50% 50% (the center-mid point of the element). When you animate the height, this point is constantly changing and hence creates that weird effect. If the transform-origin is set to a point that is fixed then that problem would be avoided.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 300px;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform-origin: right top;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
transform-origin: right top;
transform: skewX(-30deg);
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>
I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div.
Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out.
See example here: https://jsbin.com/dinehoqaro/edit?html,css,output
You can see that the expansion is starting from the top left.
.circle {
background-color: white;
border: 1px solid red;
border-radius: 50%;
width: 50px;
height: 50px;
animation: pulse 1s infinte;
-webkit-animation: pulse 1.2s infinite;
}
button {
background-color: green;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
}
#-webkit-keyframes pulse {
from {
width: 50px;
height: 50px;
}
to {
width: 100px height: 100px;
}
}
#keyframes pulse {
from {
width: 50px;
height: 50px;
}
to {
width: 100px;
height: 100px;
}
}
<div class="circle"><button>click here</button></div>
Here's a general solution using CSS flexbox, transform and pseudo-elements.
body {
display: flex;
align-items: center;
justify-content: center;
background-color: lightyellow;
height: 100vh;
margin: 0;
}
#container {
display: flex;
align-items: center;
justify-content: center;
}
.sphere {
display: flex;
background: lightblue;
border-radius: 300px;
height: 100px;
width: 100px;
}
#container::after {
display: flex;
background: lightpink;
border-radius: 300px;
height: 250px;
width: 250px;
animation: pulsate 2.5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
content: "";
z-index: -1;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
<div id="container">
<div class="sphere"></div>
</div>
jsFiddle
Also see this awesome solution by #harry: How to create a pulsing glow ring animation in CSS?
I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.
I'm using Chrome browser, which uses the -webkit prefixes as preference and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.
I have a JSFiddle here.
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>
The display doesn't work with CSS transition or animation.
Use opacity, visibility or z-index. You can combine all them.
Try to use visibility: visible in place display: block and visibility: hidden in place display: none.
And finally, combine z-index: -1 and z-index: 100 for example.
Good work ;)
If you are using #keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for #keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
See code snippet below:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
}
.parent:hover .myDiv {
display: block;
opacity: 1;
/* "both" tells the browser to use the above opacity
at the end of the animation (best practice) */
-webkit-animation: display-none-transition 1s both;
animation: display-none-transition 1s both;
}
#-webkit-keyframes display-none-transition {
0% {
opacity: 0;
}
}
#keyframes display-none-transition {
0% {
opacity: 0;
}
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
2016 UPDATED ANSWER
To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.parent:hover .myDiv {
opacity: 1;
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
You can not animate display property. You can try with visibility: hidden to visibility: visible
Just use position: fixed and drop the z-index: -5 at the end of the #keyframe animation (you can do any negative index....
CSS:
#keyframes fadeOut {
0% { opacity: 1
}
99% {
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
display:none;
position: fixed;
z-index: -5;
}
}
It's been tricky, it's been nasty, but here it is...
FadeOut (opacity) first
then truly hide (meaning: not covering up or catching any clicks, getting height: 0,...)
display: <whatever> is indeed no option.
But animating scaleY is. Or translate to far-far-away or the old classic: animating max-height (from a specific high px value) down to 0px…
For an earlier version of this snippet with some more general info on „back and forth animation on class toggle“ (and preventing that animation upon initial page load look here.
const div = document.querySelector('.target')
function toggleTarget() {
div.classList.add('active');
div.classList.toggle('play');
}
/* REF https://stackoverflow.com/a/49575979 */
/* REF https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html { /* eye candy */
background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}
div { /* eye candy */
width: 200px; height: 100px; border-radius: 20px;
background: green; display: flex; align-items: center; justify-content: center;
font-family: sans-serif; font-size: 2em; color: white; text-align: center;
text-shadow: 0px 2px 4px rgba(0,0,0,.6);
}
/* using this extra .active class prevents that there is an animation already on loading */
.active {
animation: fadeAndHideBack 1s linear forwards;
}
.play {
opacity: 0;
/* learning curve: setting background "awaits" animation finish,
setting scale prematurely jumps to it, then doing animation from there */
animation: fadeAndHide 1s linear forwards;
}
#keyframes fadeAndHide {
0% { opacity: 1; }
99.9% { opacity: 0; max-height: 100px; }
100% { opacity: 0; max-height: 0; }
}
#keyframes fadeAndHideBack {
0% { opacity: 0; max-height: 0; }
0.1% { opacity: 0; max-height: 100px; }
100% { opacity: 1; }
}
<div class="target"></div>
<button onclick="toggleTarget()">
Toggle
</button>
You can use Javascript to change both the display properties and animation. You can't put display in #keyframes.
Start with the element display:none. Then simultaneously add display:block and animation:* classes.
Here's a working example with animation in/out.
add this css ;
.fade:not(.show) {
opacity: 1;
}
this work for me..
How about this example: jsfiddle
The issue was needing to use an animation rather than transition with keyframes
#-webkit-keyframes fadeAnimation {
0% {
opacity: 0;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
}
#parent {
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#parent:hover #myDiv {
-webkit-animation: fadeAnimation 6s;
}
You can't animate the display property. You can animate the visibility property. But visibility is not the same as display, as it will not remove the div element completely from the DOM (the property, visibility:collapse, can remove an element from the DOM, if the element is a table. This is an exception). You can instead animate CSS properties height and width. For instance, the below code will animate the square-block out.
function myAnimation(){
var square= document.getElementById('square');
if(square.getAttribute("class")==='square'){
square.classList.add('animation');
}else{
square.classList.remove('animation');
}
}
.square {
background-color:blue;
transform: translate(0, 0);
width: 100px;
height: 100px;
opacity: 1;
transition: all 0.5s ease-out;
}
.square.animation {
transform: translate(-260px, -260px);
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease-in;
}
<html>
<body>
<div class="square" id="square"></div>
<br/>
<button onclick="myAnimation()">Animate</button>
</body>
</html>
FYI, I have used CSS transitions to animate the div. Hope this was useful.