move the end of the rectangle

Question

move the end of the rectangle

Navigation

#1 by (2 votes)

0

the base of the rectangle should not move or unless you do not notice much, I just want the end of the rectangle to move. I want to simulate a robotic arm

Note: The end is the left side

body{
padding:100px;
}

.div{
    animation: put-put 2s infinite;
    position:relative;}

.div:after{
    content:"";
    width:100px;
    height:100px;
    left:0px;
    top:-35px;
    position:absolute;
    border-top:7px solid #444;

    transform: rotate(30deg);
    transform-origin: 0% 0%;
}

@-webkit-keyframes put-put {
    0% {  transform: rotate(30deg); }
    5% { transform: rotate(20deg); }
    20% { transform: rotate(10deg); }
    35% { transform: rotate(0deg); }
    40% { transform: rotate(0deg); }
    60% { transform: rotate(10deg); }
    75% { transform: rotate(20deg); }
    80% {  transform: rotate(25deg);}
    100% { transform: rotate(30deg); }
}

<div class="div"></div>

css

asked by hubman 06.12.2017 в 15:07

source

1 answer

Where I find the Angular Documentation 4.4.6 Get the time with jquery

score 2 · Accepted Answer

The property animation should be given to the :after of your <div> , also to make the animation more fluid I have reduced the times:

body{
padding:100px;
}

.div{
    position:relative;
    transform: rotate(180deg);
    transform-origin: 0 0;
}

.div:after{
    content:"";
    width:100px;
    height:100px;
    left:0px;
    top:-35px;
    position:absolute;
    border-top:7px solid #444;
    animation: put-put 2s infinite;
    transform: rotate(30deg) scaleX(-1);
    transform-origin: 0% 0%;
    filter: FlipV;
}

@-webkit-keyframes put-put {
    0% {  transform: rotate(30deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(30deg); }
}

<div class="div"></div>