how to give each div a different animation speed with css animation

css animation keyframes
css animation infinite
css animation loop
css animation-delay
css keyframes
css image animation effects
css animation generator
css animation examples

Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..

http://sarahboulton.co.uk/livingroom.html

So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.

We were hoping to start applying small animations to the letters.. something along these lines..

.lipbalm {
animation: shake 0.1s; 
animation-iteration-count: infinite; }

@keyframes shake {
    0% { transform: translate(0px)  }
    50% { transform: translate(0.5px) }
    100% { transform: translate(0px) }
}

But whether these movements could be randomised for each letter, still small movements.. but using something similar to..

$(document).ready(function(){
    $('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});

..each letter randomises its movement, maybe one ends up on..

@keyframes shake {
        0% { transform: translate(0px)  }
        50% { transform: translate(0.4px) }
        100% { transform: translate(0px) }
    }

.. and another has..

@keyframes shake {
        0% { transform: translate(0px)  }
        50% { transform: translate(0.1px) }
        100% { transform: translate(0px) }
    }

and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !


The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.

So something like this:

css

.shake-1{
  animation: shake-1 0.3s; 
  animation-iteration-count: infinite;
}
.shake-2{
  animation: shake-2 0.3s; 
  animation-iteration-count: infinite;
}
.shake-3{
  animation: shake-3 0.3s; 
  animation-iteration-count: infinite;
}
@keyframes shake-1 {
  0% { transform: translate(0px) }
  50% { transform: translate(2px) }
  100% { transform: translate(0px) }
}
@keyframes shake-2 {
  0% { transform: translate(0px) }
  50% { transform: translate(-2px) }
  100% { transform: translate(0px) }
}
@keyframes shake-3 {
  0% { transform: translate(0px) }
  50% { transform: translate(0px, 2px) }
  100% { transform: translate(0px) }
}

html

<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>

etc

Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa

Transitioning Multiple Properties, An animation lets an element gradually change from one style to another. The following example uses the value "infinite" to make the animation The following example shows the some of the different speed curves that can be used: The following table lists the @keyframes rule and all the CSS animation properties:  The animation-timing-function specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly.


You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.

For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :

var css;
for (x=1;x=10;x++){
   css += '@keyframes shake'+  x.toString()  +' {';
   css += '0% { transform: translate(0px)}';
   css += '50% { transform: translate('+  Math.random()  +'px)}';
   css += '100% { transform: translate(0px)}';
   css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );

Finally you can assign each keyframe randomly to target divs:

$('.goldrocks-g').each(function(){
   (this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})

CSS Animations, If we set up a keyframe animation to change the background color of an However, we can add a different animation-duration to each .bar when the We can do this by chaining our transitions on each element where there  CSS animation-duration Property div { animation-duration: 3s; The animation-duration property defines how long an animation should take to complete one cycle.


I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.

Using Multi-Step Animations and Transitions, The animation property in CSS can be used to animate many other CSS Each animation needs to be defined with the @keyframes at-rule which is then by the shorthand animation property, or its eight sub-properties, to give more here */ } .element { animation-name: stretch; animation-duration: 1.5s;  There are many options for combining CSS variables with animation. Think about contexts such as audio visualizations, JavaScript event-driven scenarios, and even CSS driven events such as hover, focus and target. In theory, an Apple Watch could be connected to an API whilst using a CSS variable-based animation of a beating heart.


animation, CSS transitions provide a way to control animation speed when changing For example, if you change the color of an element from white to black, Note: The set of properties that can be animated is changing as the or multiple values to allow each property to transition over a different period of time. The CSS bubble animation that features on 7UP is a beautiful example of carrying a brand theme through into the website design.The animation consists of a few elements: the SVG ‘drawing’ of the bubbles and then two animations applied to each bubble.


Using CSS transitions, CSS animations make it possible to animate transitions from one the timing, duration, and other details of how the animation sequence should progress. Each keyframe describes how the animated element should render  Specify the Speed Curve of the Animation. The animation-timing-function property specifies the speed curve of the animation. The animation-timing-function property can have the following values: ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)


Using CSS animations, Animations within CSS3 allow the appearance and behavior of an element to be altered in while animations can set multiple points of transition upon different keyframes. The transition-timing-function property is used to set the speed in which a As with all other transition properties, to delay numerous transitions, each  35 Useful CSS Animation Examples For Logically Creative Minds Using animations on your website will give an engaging experience to the user. Before the CSS3 framework, developers have to work with multiple scripts to make animated elements.