I'm new to this topic of animations. Basically I want to move a div .son in your hover property. I would like this animation to start from its current position at 10px on the right. I am normally able to perform this animation by defining an initial position for "left" and an ending for "left" but in this case I want it to take the initial position in which it is and thus move 10px to the right.
<div class="father">
<div class="son">
</div>
</div>
.father{
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.son{
position:absolute;
width:100px;
height:100px;
border:1px solid red;
}
.son:hover {
-webkit-transition: all 0.5s ease;
-webkit-animation: fadein_1 0.2s ease-in;
}
#-webkit-keyframes fadein_1 {
from { opacity: 1;left:auto;z-index:2; }
to { opacity: 0; left:10px;z-index:3; }
}
this is my code:
https://jsfiddle.net/ze9vdLa3/it?
thanks
If you can use jQuery, check this :
https://jsfiddle.net/95agyjuo/
jQuery('.son').mouseover(function(){
jQuery(this).animate({
left : "+=10"
})
})
You can accomplish the desired animation using the CSS translateX() function. As #Joe Koker stated, this is more performant than animating the left property.
#-webkit-keyframes fadein_1 {
from {
opacity: 1;
transform: translateX(0px); //start from initial position
z-index:2;
}
to {
opacity: 0;
transform: translateX(10px); //move 10px
z-index:3;
}
}
Your question is a bit vague, but if what you want is to animate an element to the right, it's easy. You almost had it.
Some things:
It's not possible to animate from auto, so I had to change left:auto -> left: 0; (from { opacity: 1;left:0;z-index:2; })
-webkit- isn't necessary
It's not possible to animate z-index either
Here is a working fiddle: https://jsfiddle.net/oqdn6xLg/1/
Though for this use case, I would recommend using the transition property instead, as its simpler. Check out the difference here: https://jsfiddle.net/L04xhgpr/
Note that transform: translateX() performs better, as others have already said :)
I have some paper-tabs and some CSS code like the following code snippets, but I can't figure out how to pass in an animation name or #keyframes into the mixin that Polymer uses for paper-tabs (--paper-tabs-selection-bar). How would I go about doing this? Preferably with only CSS, but a best practice with JavaScript is also welcome.
HTML:
<paper-tabs selected="0">
<paper-tab name="test">Test</paper-tab>
</paper-tabs>
CSS:
/* keyframes can't be accessed without the deprecated /deep/ selector */
paper-tabs {
--paper-tabs-selection-bar: {
animation: selection-bar-clear 0.4s ease forwards;
}
}
#keyframes selection-bar-clear {
from {
border-bottom: 2px solid var(--app-header-light-text-color);
}
to {
border-bottom: 2px solid var(--app-header-dark-text-color);
}
}
/* keyframes aren't parsed in mixins */
paper-tabs {
--paper-tabs-selection-bar: {
animation: selection-bar-clear 0.4s ease forwards;
#keyframes selection-bar-clear {
from {
border-bottom: 2px solid var(--app-header-light-text-color);
}
to {
border-bottom: 2px solid var(--app-header-dark-text-color);
}
}
}
}
Take a look at https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#custom-properties-shim-limitations to see if this is actually feasible with plain CSS mixins/variables. My guess is no, but I haven't read the full docs, let alone tried this.
I would probably go the Web Animations route, since that way you can implement your animations as a separate class (in JavaScript), mix that into your element's implementation and use one of your own, shiny animation methods.
So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which.
For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going.
However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu:
This effect can be achieved through transitions like so:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}
http://jsfiddle.net/NwEGz/
Or, through animations like so:
.sf-page {
-webkit-animation-duration: .4s;
-webkit-transition-timing-function: ease-out;
}
.sf-page.in {
-webkit-animation-name: sf-slidein;
-webkit-transform: translate3d(0, 0, 0);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
#-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(240px, 0, 0); }
}
#-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}
http://jsfiddle.net/4Z5Mr/
With HTML that looks like so:
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>
And, this accompanying jQuery script:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
What I'd like to understand is what are the pros and cons of these approaches.
One obvious difference is that animating is taking a whole lot more code.
Animation gives better flexibility. I can have different animation for sliding out and in
Is there something that can be said about performance. Do both take advantage of h/w acceleration?
Which is more modern and the way going forward
Anything else you could add?
It looks like you've got a handle on how to do them, just not when to do them.
A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.
If you want to perform something that does not specifically involve a start state and an end state, or you need more fine-grained control over the keyframes in a transition, then you've got to use an animation.
I'll let the definitions speak for themselves (according to Merriam-Webster):
Transition: A movement, development, or evolution from one form, stage, or style to another
Animation: Endowed with life or the qualities of life; full of movement
The names appropriately fit their purposes in CSS
So, the example you gave should use transitions because it is only a change from one state to another
A shorter answer, straight on point:
Transition:
Needs a triggering element (:hover, :focus etc.)
Only 2 animation states (start and end)
Used for simpler animations (buttons, dropdown menus and so on)
Easier to create but not so many animation/effect possibilities
Animation #keyframes:
It can be used for endless animations
Can set more than 2 states
No boundaries
Both use CPU acceleration for a much smoother effect.
Animation takes a lot more code unless you're using the same transition over and over, in which case an animation would be better.
You can have different effects for sliding in and out without an animation. Just have a different transition on both the original rule and the modified rule:
.two-transitions {
transition: all 50ms linear;
}
.two-transitions:hover {
transition: all 800ms ease-out;
}
Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.
Both are very modern.
My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.
Animations are just that - a smooth behavior of set of properties. In other words it specifies what should happen to a set of element's properties. You define an animation and describe how this set of properties should behave during the animation process.
Transitions on the other side specify how a property (or properties) should perform their change. Each change. Setting a new value for certain property, be it with JavaScript or CSS, is always a transition, but by default it is not smooth. By setting transition in the css style you define different (smooth) way to perform these changes.
It can be said that transitions define a default animation that should be performed every time the specified property has changed.
Is there something that can be said about performance. Do both take
advantage of h/w acceleration?
In modern browsers, h/w acceleration occurs for the properties filter, opacity and transform. This is for both CSS Animations and CSS Transitions.
.yourClass {
transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}
.yourClass:hover {
color: #f00;
}
<p class="yourClass"> Hover me </p>
CSS3 Transitions brought frontend developers a significant ability to modify the appearance and behavior of an element as relative to a change in his state. CSS3 animations extends this ability and allow to modify the appearance and behavior of an element in multiple keyframes, so transitions provides us the ability to change from one state to another, while that animations can set multiple points of transition within different keyframes.
So, let's look at this transition sample where applied a transition with 2 points, start point at left: 0 and an end point at left: 500px
.container {
background: gainsboro;
border-radius: 6px;
height: 300px;
position: relative;
}
.ball {
transition: left 2s linear;
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
left: 0px;
}
.container:hover .ball{
left: 500px;
}
<div class="container">
<figure class="ball"></figure>
</div>
The above can be also created via animation like so:
#keyframes slide {
0% {
left: 0;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>
And if we would like another in-between point, it would be possible to achieve only via animation, we can add another keyFrame to achieve this and this is the real power of animation over transition:
#keyframes slide {
0% {
left: 0;
}
50% {
left: 250px;
top: 100px;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>
transition can go reverse from middle of the way, but animation replay the keyframes from start to end.
const transContainer = document.querySelector(".trans");
transContainer.onclick = () => {
transContainer.classList.toggle("trans-active");
}
const animContainer = document.querySelector(".anim");
animContainer.onclick = () => {
if(animContainer.classList.contains("anim-open")){
animContainer.classList.remove("anim-open");
animContainer.classList.add("anim-close");
}else{
animContainer.classList.remove("anim-close");
animContainer.classList.add("anim-open");
}
}
*{
font: 16px sans-serif;
}
p{
width: 100%;
background-color: #ff0;
}
.sq{
width: 80px;
height: 80px;
margin: 10px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.trans{
transition: width 3s;
}
.trans-active{
width: 200px;
}
.anim-close{
animation: closingAnimation 3s forwards;
}
.anim-open{
animation: openingAnimation 3s forwards;
}
#keyframes openingAnimation {
from{width: 80px}
to{width: 200px}
}
#keyframes closingAnimation {
from{width: 200px}
to{width: 80px}
}
<p>Try click them before reaching end of movement:</p>
<div class="sq trans">Transition</div>
<div class="sq anim">Animation</div>
in addition, if you want the javascript to listen for end of transition, you'll get one event for each property that you change.
for example transition: width 0.5s, height 0.5s. the transitionend event will trigger two times, one for width and one for height.
Just a summary, thanks to this post, there are 5 main differences between CSS transitions vs CSS animations:
1/ CSS transitions:
Animate an object from one state to another, implicitly by browser
Cannot loop
Need a trigger to run (:hover, :focus)
Simple, less code, limited powerful
Easy to work in JavaScript
2/ CSS animations:
Freely switch between multiple states, with various properties and time frame
Can loop
Don’t need any kind of external trigger
More complex, more code, more flexible
Hard to work in JavaScript due to syntax for manipulating keyframes
I believe CSS3 animation vs CSS3 transition will give you the answer you want.
Basically below are some takeaways :
If performance is a concern, then choose CSS3 transition.
If state is to be maintained after each transition, then choose CSS3 transition.
If the animation needs to be repeated, choose CSS3 animation. Because it supports animation-iteration-count.
If a complicated animation is desired. Then CSS3 animation is preferred.
Don't bother yourself which is better. My give away is that, if you can solve your problem with just one or two lines of code then just do it rather than writing bunch of codes that will result to similar behavior.
Anyway, transition is like a subset of animation. It simply means transition can solve certain problems while animation on the other hand can solve all problems.
Animation enables you to have control of each stage starting from 0% all the way to 100% which is something transition cannot really do.
Animation require you writing bunch of codes while transition uses one or two lines of code to perform the same result depending on what you are working on.
Coming from the point of JavaScript, it is best to use transition. Anything that involve just two phase i.e. start and finish use transition.
Summary, if it is stressful don't use it since both can produce similar result
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 some slide animation in css. There is any chance to keep this effect?
#arch{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
}
#arch:hover{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
I'm guessing you mean to have to the element slide away on hover, and slide out when the mouse leaves? I suggest putting the :hover on the parent element:
*:hover > #arch{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
Depending on what the parent element is, you may need to wrap the #arch element in a <div>.
Also, you may need to use CSS transitions instead of CSS animations, so that the animation doesn't abruptly end on mouseout:
#arch{
-webkit-transition:width 1s;
width: 220px;
}
*:hover > #arch{
width: 0;
}
(Don't forget to include the other variations of the property for the other browsers)
Remove the :hover event and let it sit.