locked
Css animation for icon (without JS) RRS feed

  • Question

  • User-1962730110 posted

     Hi everyone. I'm learning HTML and CSS, but I want to try CSS (cause I don't know JS at all) animation.
    Here's the website (
    www.worktime.com). There's a clock in the top left corner. How do I make the arrows on the clock tick with the synchronized time on the desktop?
    Or just after "hover" make them spin fast. Is this possible, or do I need to start learning JS?

    Thursday, October 1, 2020 9:36 AM

All replies

  • User753101303 posted

    Hi,

    For the client side, you should really learn at least HTML, CSS and JavaScript.

    Now for this using CSS animations seems the right tool: see https://www.w3schools.com/css/css3_animations.asp (basically you'll have an animation going from 0 to 360° during 60 seconds and that repeats forever).
    Could be a good start for JavaScript as well as you'll need just a bit of JavaScript to set initial angles based on the current time.

    Edit: see for example https://cssanimation.rocks/clocks/ which explain the whiole process including the needed JavaScript code.

    Thursday, October 1, 2020 11:54 AM