I have a problem with animations when I pass variables through HTML. My code is :
.falling-star {
width: 10px;
height: 15px;
transform: rotate(45deg);
background: red;
border-radius: 50%;
top: var(--top);
left: var(--left);
position: absolute;
animation: falling-star-animation var(--animationTime) infinite ease-in-out;
}
#keyframes falling-star-animation {
40% {
top: var(--top);
left: var(--left);
background: rgba(255, 255, 255, 0);
}
60% {
background: red;
}
100% {
top: var(--endTop);
background: rgba(255, 255, 255, 0);
left: var(--endLeft);
}
}
<div class="falling-star" style="--top:2vh; --endTop:90vh; --left:50vw; --endLeft:10vw; --animationTime:8s; --animationDelay: 2s;"></div>
<div class="falling-star" style="--top:4vh; --endTop:70vh; --left:90vw; --endLeft:50vw; --animationTime:4s; --animationDelay: .5s;"></div>
<div class="falling-star" style="--top:0; --endTop:50vh; --left:88vw; --endLeft:30vw; --animationTime:3s; --animationDelay: 1s;"></div>
I thought that animations are behind something (lower z-index), but they aren't. When I inspect them in console, then I see that they aren't moving. When I change from variables to static values then the animation is working. Earlier it was working but I probably changed something by accident and I don't know what's this (git history doesn't show any changes in this code).
Okay, i debuged this. Resolve was to remove camel case and type every css variable using only lower case. I don't know why it works like that, but for everyone who will come here in future - this is my solution of this problem :D
Related
I am building a web application, some HTML elements might take some time to be fetched.
So I decided to render the layout of the element, without the data from the backend. But I want to indicate to the user, that the data is loading with a CSS animation. I want it to look like this, but I want the transition of the color change to be smooth so that the lighter area travels from one side to the other. Any ideas?
body {
animation: 2000ms infinite color-loading;
}
#keyframes color-loading {
0% {
background: linear-gradient(
to right,
#363644,
#282933
);
}
100% {
background: linear-gradient(
to right,
#282933,
#363644
);
}
}
I don't think smooth transition of linear gradients in css transitions/animations is supported in any major browsers yet.
One way you can achieve something similar with css only is by using one div inside the other and make it so that the container div hides its overflow, make the inner div longer, relatively positioned, and with a linear-gradient background. Then in your animation, you can smoothly reposition the inner div:
.div1 {
display: block;
width: 200px;
height: 20px;
background-color: #282933;
overflow: hidden;
}
.div2 {
display: block;
width: 700px;
height: 20px;
background:
linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0) 100%
);
position:relative;
left: -700px;
animation: color-loading 2000ms ease 0s normal infinite none;
}
#keyframes color-loading {
0% {
left: -700px;
}
100% {
left: 0px;
}
}
...
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
...
I think animation-timing-function property will help you out.
Also, I have checked and find your background colors are very similar, try with other color combination with animation-timing-function property and see the difference.
Please refer for more detail information below link:
https://www.w3schools.com/css/css3_animations.asp
Please let me know if you find any issues.
I'm trying to animate a card using transition with css and can't seem it working.
Here's the source script:
.paper{
border: 0px;
width: 100%;
height: 100%;
border: 0px;
position: absolute;
top: 0;
left: 0;
}
.pagesfront,
.pagesback{
background-color: #fff3d6;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left;
transition: transform 0.5s;
}
.pagesfront{
z-index: 1;
}
.pagesback{
z-index: 0;
}
.flipped .pagesfront,
.flipped .pagesback{
transform: rotateY(-180deg);
}
Is there something I'm missing in the class pages where the transition comes in or is there something else?
My guess is you're putting the class .flipped on the wrong html element.
You do realize that the parent element of .pagesfront or .pagesback needs to have the class .flipped in order to get the flipping animation working, right?
If that was your intention, never mind what I said. If you meant to trigger the animation by adding the .flipped class to either .pagesfront or .pagesback, you might need to re-write that CSS code like this:
.pagesfront.flipped,
.pagesback.flipped{
transform: rotateY(-180deg);
}
(note there is no space between .pagesfront/back and .flipped.)
thanks for the answer, sorry to take your time but it turns out all i need is reopen the browser, what a weird case
In other words, preventing children from being affected by parent property
so i tried to rotate these buttons on hover first then other things, but let's focus on hover for now, but the problem is that it rotates the nested img too..
i tried many things to prevent it, but the img kept rotating
best solution so far is rotate it oppositely, I'm not satisfied at all with this solution cause it rotates again on mouse leave
here's some code been using
<div class="h2_2006">
<button class="h2_2601">
<img class="h2_2611" title="Add To Cart" src="https://s.svgbox.net/materialui.svg?ic=add_photo_alternate" alt="Add To Cart">
</button>
<button class="h2_2602">
<img class="h2_2621" title="Watch" src="https://s.svgbox.net/materialui.svg?ic=alarm_add" alt="Watch">
</button>
<button class="h2_2603">
<img class="h2_2631" title="Fav" src="https://s.svgbox.net/materialui.svg?ic=auto_awesome" alt="Add To Favorite">
</button>
</div>
and some scss with failed :after pseudo examples
//scss
.h2_2006 {
#include grid(1fr 1fr 1fr, 1fr);
align-items: center;
grid-gap: 3.3vw;
>button {
justify-content: center;
display: flex;
align-content: center;
max-height: 5.2em;
max-width: 5.2em;
border-radius: 50%;
padding: 0;
border: 0;
transition: all 1s;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
transition: all .5s ease-in-out;
transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
&:hover:after {
transform: translateX(-9%) translateY(-25%) rotate(45deg);
transition: all 1s;
}
>:not(img) {
pointer-events: auto;
}
}
.h2_2601 {
#include pos(auto, 1, 2, center, center);
background: linear-gradient(134deg, rgb(10, 32, 58) 50%, rgb(15, 48, 87) 50%);
.h2_2611 {
z-index: 1;
outline: none;
transform-origin: 0 0 0;
}
}
.h2_2602 {
#include pos(auto, 1, 3, center, center);
background: linear-gradient(134deg, rgb(15, 48, 87) 50%, rgb(10, 32, 58) 50%);
content: "";
&:hover,
&:focus {
outline: none;
transform: rotate(0.5turn);
transition: transform 1s;
}
.h2_2621:hover {
outline: none;
transform: rotate(-180deg);
transition: transform 1s;
}
}
}
now, idk what have i missed out here cause i'm turnin off already
any help would be much appreciated
In general, a css class affects everything within it. So, if you do not want your svgs to be rotated, you can place the rotating class on something more specific (like adding another div for only those items that need to be rotated, so long as they are just siblings).
If you need a parent in the hierarchy to be rotated, but not the child, then you can specify the counter-style on the child (which you mentioned as a method you would not like to use)
The important thing to understand here is that your svg within the button is like putting a picture on a disc - if you rotate the disc, the picture will appear to rotate too, unless you rotate it in the opposite direction.
Here is an interesting article about different layers of specifying css. Perhaps this can help you find a solution
Hello I wondering if there is a transition to make the purple div (the one that slides down when you hover over the feeling down? picture) bounce when it reaches the end?
here is the code- and jsFiddlle Demo link
HTML
<div class="img">
<div class="hover"><h2>project 1</h2></div>
</div>
CSS
.img {
width: 457px;
height: 288px;
background-image: url("http://i59.tinypic.com/xdulh2.png");
position:relative;
overflow:hidden;
}
h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}
.hover {
position:absolute;
top:-100%;
width: 457px;
height: 288px;
background: rgba(130,76,158,0.5);
-webkit-transition:all 1s;
}
.img:hover .hover {
top:0;
}
an example of the transition i mean you can see here http://www.ollygibbs.com
CSS Transition doesn't have bounce-style timing function, so we have to code it with CSS animation keyframes. The problem here is - how to easily decompose a bouncing ( or any other ) functions into a keyframe series over certain style?
This was the problem I encountered when I build transition.css, so I built a tool "easing.css" to help me generate keyframes from arbitrary equations.
The idea is simple; say we want to make a bounce effect:
we first make a timing function f(t) for our desired effect, such as
Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8
according to how the output of this function changes, we sampled this function with different interval from 0 to 1.
use the sampled (t, f(t)) pairs to generate the css animation keyframes.
apply the result animation when we need a transition.
with the concept above, easing.css also provides several timing function preset so you can play with. Below is a 15-frames bouncing animations generated via easing.css, you could make it more like a real bounce by increasing the frame count or tweaking the timing function provided:
.your-block {
animation: YourAnimation 2s linear 1s;
}
#keyframes YourAnimation {
0% { height: 7px; }
8% { height: 24px; }
10% { height: 36px; }
17% { height: 99px; }
19% { height: 83px; }
21% { height: 69px; }
24% { height: 57px; }
25% { height: 56px; }
27% { height: 59px; }
34% { height: 100px; }
36% { height: 88px; }
38% { height: 80px; }
48% { height: 100px; }
72% { height: 100px; }
100% { height: 100px; }
}
The animate.css library will give you a more complete setup and you can choose and pick the ones you need, but if you must code your own, use this code I included in a CODEPEN
Basically, you instantiate the bounce effect with the following crossbrowser code. This code establishes the bounce, speed of bounce, and the direction it will bounce. You can choose ease-out if you want to.
Now, Bouncing is a tricky thing. Because it must go up and down until it stops. so the bounces must gradually decrease the height. So, this is why you need #-keyframes, (notice you will need #-webkit-keyframes and #-moz-keyframes, etc for a more complete cross browser development. These keyframes allow you to break the effect at any point. In a bouncing effect in particular, the effect breaks every 10% by reducing it's position in the Y axis (which it means height), until it finally stops.
-webkit-animation: bounce 1200ms ease-in;
-moz-animation: bounce 1200ms ease-in;
-o-animation: bounce 1200ms ease-in;
animation: bounce 1200ms ease-in;
Hope that helps you.
p.s. my code looks a little buggy but you'll have a good enough start. I added your code in your fiddle to it too
Hey as previous suggested animate.css is pretty good with css animations, but to have more control over the animation you can add it with js. You just have to add an small script.
$('.img').hover(function(){
$('.hover').addClass('animated bounceInDown');
}, function() {
$('.hover').removeClass('bounceInDown');
$('.hover').addClass('bounceOutUp');
setTimeout(function() {
$('.hover').removeClass('animated bounceOutUp');
}, 1000);
});
Check out this fiddle example
After that, you just need to play with the values on the .bounceInDown .bounceOutUp keyframes annimation (if you want to).
So that the animation is more or less bouncy
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -800px, 0);
transform: translate3d(0, -800px, 0);
}
}
Another way (with jquery) of doing this will be using jQuery .animate and easing plugin.
<div id="example">
<p class="bounce"></p>
</div>
div {
width: 200px;
height: 200px;
background: red;
}
.bounce {
width: 100%;
height: 0px;
background: rgba(134,12,12,.4);
}
$('#example').on('mouseenter',function(){
$('p').animate(
{ height: "200px" },
1000,
"easeOutBounce"
);
})
[js fiddle example][1] [1]: http://jsfiddle.net/2ra7yumo/2/
It gives you little bit more(or easier) control on the animation.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So I have just explored a whole new bunch of websites at Awwwards. One of them that particularly blew my mind was this. I have just done some basic to intermediate CSS stuff. I was wondering how are these guys getting that noise/disturbance for their fonts ? I am totally clueless. Tried inspecting the code, couldn't understand much.
I know I am not capable of building the whole thing anytime soon, but I love the idea of the noisy background.
How to I go about this? Any pointers would be appreciated :)
Here is Lucas Bebber's Glitch SVG effect.
Here is original and working demo
Here is code snippets
body {
background: black;
font-family: 'Varela', sans-serif;
}
.glitch {
color: white;
font-size: 100px;
position: relative;
width: 400px;
margin: 0 auto;
}
#keyframes noise-anim {
$steps: 20;
#for $i from 0 through $steps {
# {
percentage($i*(1/$steps))
}
{
clip: rect(random(100)+px, 9999px, random(100)+px, 0);
}
}
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
#keyframes noise-anim-2 {
$steps: 20;
#for $i from 0 through $steps {
# {
percentage($i*(1/$steps))
}
{
clip: rect(random(100)+px, 9999px, random(100)+px, 0);
}
}
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<div class="glitch" data-text="GLITCH">GLITCH</div>
They're using HTML5 Canvas to create that noise animation, its drawn with Javascript rather than CSS which is why you wouldn't be able to work it out from inspecting it.
Here's a tutorial on how to create static/noise textures:
http://code.tutsplus.com/tutorials/how-to-generate-noise-with-canvas--net-16556
And here's a demo:
http://jsfiddle.net/AbdiasSoftware/vX7NK/
I believe this part of the code is creating the random static:
buffer32[i++] = ((255 * Math.random())|0) << 24;
Might be worth also watching some intros to HTML5 Canvas too like this:
https://www.youtube.com/watch?v=VS1mD9Z0h-Q