I'm looking to do a simple effect of crushing some text. Only problem is, when I scale along the Y axis, it squeezes from top and bottom, leaving a strange floating squeezed element.
#-webkit-keyframes crush_head {
from {
-webkit-transform:scaleY(1); /* Safari and Chrome */
}
to {
-webkit-transform:scaleY(0.5); /* Safari and Chrome */
}
}
I want to squeeze this puppy DOWN like it's getting a weight dropped on it's head. NOT just from both sides. Any idea how to achieve the desired effect?
Attached is a fiddle of how I'm currently doing this.
http://jsfiddle.net/54A9M/
The property that you are looking for is transform-origin-y:
-webkit-transform-origin-y: 77%;
.crush {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
border-top: 1px solid black;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: crush_head;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin-y: 77%;
}
updated demo
The usual value would be "bottom", but then it will crush to the lowest point under the letters (in fact, to the real bottom of the text).
I set it to 77% on a trial an error basis.
Related
I am having an issue with Chrome (v. 67) at OSX and movement animations. I've prepared JS fiddle with it:
https://jsfiddle.net/5m173ghv/31/
If you open it at safari it is working very good. But, when you will use chrome it has little lags when moving.
I cannot describe it a bit more... You need to open it and try yourself on the big screen... Please look carefully at white box. You will see that this box has sometimes something like lags or small jumps(?)...
This is very weird. I've tried almost every answer from the internet (trust me ;) ).
I also tried:
Change transforms at animation into position (left)
Change animations into transitions
adding additional parameters (backface-visibility, perspective, will-change...)
Changing sequences of animation to have more steps (per 10%)
Debugging on chrome dev tools (~30-40fps)
Adding transforms like translateZ(0)
You think that this is chrome bug or maybe my fault? Do you have any solution for that?
Here you have code:
HTML
<span class="spark"></div>
SCSS
body {
background-color: black;
}
#keyframes left-to-right {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(50vw,0,0);
}
}
.spark {
position: absolute;
top: 30px;
width: 322px;
height: 500px;
background-color: white;
transform: translate3d(0,0,0);
backface-visibility: hidden;
perspective: 1000px;
animation: left-to-right 5s infinite linear;
will-change: transform;
pointer-events: none;
user-select: none;
}
This is my code, including the animation in the CSS portion and the H1 element i want to apply it to.
In fact, there's nothing wrong with the animation, but left doesn't have any impact on a static-positioned h1 actually.
Have you tried to change that left to margin-left, or add position: relative to h1? Like this: http://plnkr.co/edit/x6JythFhtrF8UFeqKtyG?p=preview
Plus, I believe you wanna make it run infinitely, otherwise the alternate cannot be observed, therefore you might wanna put in infinite as the animation-iteration-count
h1 {
position: relative; /* TRY TO ADD THIS */
animation: enter 5s linear alternate infinite; /* OPTIONAL infinite */
}
#keyframes enter {
from {
left: 0em;
}
to {
left: 20em;
}
}
#name
{
width: 100px;
height: 20px;
background-color: lightgrey;
}
<div id="name">
I am Batman I am BatmanI am Batman I am Batman
</div>
I don't know how to explain this but I have contents of name slide inside the div with infinite iterations.
This is what I tried but it doesn;t give affect.
-webkit-iteration: infinite;
You had the right idea and that was a great start. What you are looking for is #keyframes. With keyframes, you can create a function name and specify the start and end values with from and to respectively.
The animation property is a shorthand for declaring multiple animation properties in one line. It can take among other things
animation-name: In this case, move, that we defined in out keyframes function
animation-duration: How long the animation will take. In this case, it will take 2 seconds, to complete the transition
animation-iteration-count: How many times the function will be called. Here, it will continue indefinitely.
Also, keep in mind that it's animation-iteration-count instead of animation-iteration if you are not doing the shorthand.
Browser Support
Internet Explorer 10+ (Will not work in IE9 or lower)
Google Chrome: 43+
Firefox: 16+
Safari: 9+
Opera: 30+
Snippet
#name {
width: 100px;
height: 20px;
background-color: lightgrey;
animation: move 2s infinite;
}
#keyframes move {
from { margin-left: 0px; }
to { margin-left: 100px; }
}
<div id="name">
I am Batman I am BatmanI am Batman I am Batman
</div>
Recently in my project I have came across the image in the link . It is like connecting talented people together in the industry like music, art, singer etc.., . Is it is possible to make the dashed lines to run using CSS3 animation, transition or transform...? If it is how to make that effect.
It would be possible, but then you need to consider what happens on different browsers. Css animations are not yet (fully) supported in all browsers. Also css transforms are not fully integrated, so in IE you would see a broken page with some random horizontal lines.
But you want to use this you will need to animate every line individually.
Have a look at this website for info on animating http://css3.bradshawenterprises.com/
For 16 lines this would be terrible. But can be done with the code below.
.line {
border-top: 1px solid red;
height: 1px;
}
#line1 {
position absolute;
width: 200px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-animation:move_line1 1s infinite;
-moz-animation:move_line1 1s infinite;
animation:move_line1 1s infinite;
}
#line2 {
...
}
#keyframes move_line1 {
0% {
top: 300px;
left: 300px;
}
100% {
top: 280px; /* Based on the rotation you can calculate the new x and y with sine and cosine */
left: 280px;
}
}
#keyframes move_line2 {
...
}
You would basically add the following to your html
<div id="line1" class="line> </div>
<div id="line2" class="line> </div>
...
border: 1px dashed red;
then use other methods of positioning it correctly
I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.
Here's an example:
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
50% { left: 100px; }
100% { left: 0; }
}
So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.
Another example, slightly more different than my original question, but if I find a solution for it it will do as well:
#-webkit-keyframes slide-one-pager {
0% { display: none; }
50% { display: block; }
75% { display: block; }
100% { display: none; }
}
Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.
Any ideas?
You can use step-start or step-end (graphs) in your animation configuration so the curve will act like a "steps" (not curvy) so there will be no visual transition between frames, thus the animation will just "jump" between frames.
Example CSS:
animation:1s move infinite step-end;
The above example will call the move keyframes (which I didn't write because it's irrelevant), and will loop on the frames endlessly with the "step" argument which was described earlier, without a transitioned curve.
#keyframes foo{
0%{ margin-left:0 }
50%{ margin-left:50% }
}
div{
width: 50px;
height: 50px;
background: black;
border-radius: 50%;
animation:1s foo infinite;
}
input:checked + div{
animation-timing-function: step-end;
}
<label>
<input type='checkbox' checked /> Disable Animation transition
<div></div>
</label>
👉 Cool demo using this technique
I searched the same thing as you actually.
You can set a greatful parameters in animation, called animation-timing-function allowing you to set perfectly and mathematicaly the animation : With bezier curve values or, if, like me, you're not that good mathematician, a parameter call "step()".
For an example, in none shorthand writing :
.hiding {
animation-name:slide-one-pager;
animation-duration:2s;
animation-timing-function:steps(1);
}
By default, the value of this parameter is set to 0, meaning no steps.
You can read more about this interesting feature here : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
And here a shorthand notation for your animation:
.hiding {
animation:slide-one-pager 2s steps(1);
}
For me, it works fine at least on firefox 23.0.1.
Even if I think you solved the problem since one year, maybe could help some people like me here :)
I made it using the -webkit-animation-fill-mode: forwards; property, that stops the animation at 100% without returning the element to the original state. I made up a fiddle with a working example, you can check it out here.
Although in the fiddle you can find a better example, I basically did this (Assuming absolute positioned elements):
.hiding {
-webkit-animation: slide-one-pager 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
49% { left: 0; }
50% { left: -100px; }
100% { left: -100px; }
}​
It just jumps from 0 to -100 in the middle of the transition (49% -> 50% as you 'suggested' :P), and stays there at 100%. As said, with -webkit-animation-fill-mode: forwards; the element will stay as in 100% without going back to it's original state.
I don't know if it'll work in your scenario, but I believe there'd be an easy solution if it doesn't.
You can use this:
animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;