Develop Reference

Rotate Object every few seconds

I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.
I tried this:
setTimeout(function() {
document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);
but this moves the object once and I want to make the cube spin infinite with 3 stops.
So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.
Is there a way to do it ? Or is it not possible.

You can use a keyframe animation for this.
For example:
#keyframes rotation {
0%, 100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
And then you use it like this
.my-element {
animation: rotation 5s infinite;
}
Here it is in combination with your code from the codepen:
.container {
margin-top: 150px;
}
.news-grid {
width: 300px;
margin: auto;
}
.news-card {
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
outline: 1px solid blue;
}
.face>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#experiment {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(245deg);
animation: rotation 5s infinite;
}
.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#keyframes rotation {
0%,
100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
<div class="container">
<div class="news-grid">
<div class="news-card">
<div class="cube">
<div class="face one"></div>
<div class="face two">
<img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
<div class="face three">
Information Architecture 101: Techniques and Best Practices
</div>
</div>
</div>
</div>
</div>

You need to use setInterval, not setTimeout

how to create design Letter z with animation in css

I want to create the letter z in animation.
In such a way that the first part (1) appears without delay with animation from left to right.
When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation.
When the second part (2) is down, the third part (3) will appear from left to right with animation.
The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late.
Thank you in advance for your cooperation.
#global{
width:200px;
position:relative;
cursor:pointer;
height:200px;
background-color: black;
padding: 1rem;
}
.mask{
position:absolute;
border-radius:2px;
overflow:hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane{
background:#ffffff;
width:400%;
height:100%;
position:absolute;
transform : translate3d(0px,0,0);
z-index:100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane{
z-index:2000;
animation: trans1 1s ease-in infinite 0s forwards;
-webkit-animation: trans1 1s ease-in infinite 0s forwards;
}
#middle .plane{
transform: translate3d(0px,0,0);
background: #bbbbbb;
animation: trans2 1s linear infinite 2s forwards;
-webkit-animation: trans2 1s linear infinite 2s forwards;
}
#bottom .plane{
z-index:2000;
animation: trans3 2s ease-out infinite 4s forwards;
-webkit-animation: trans3 2s ease-out infinite 4s forwards;
}
#top{
width:200px;
height:15px;
left:0;
z-index:100;
transform: skew(-15deg, 0);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#middle{
width:187px;
height:25px;
left:6px;
top:78px;
transform:skew(-15deg, -40deg);
-webkit-transform:skew(-15deg, -40deg);
-moz-transform:skew(-15deg, -40deg);
-ms-transform:skew(-15deg, -40deg);
-o-transform:skew(-15deg, -40deg);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#bottom{
width:200px;
height:15px;
top:159px;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2{
0% {
width: 0%;
left: 100%;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>

This snippet thinks of things slightly differently.
Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.
That way aspects such as the lines not being visible to start with are dealt with.
#global {
width: 200px;
position: relative;
cursor: pointer;
height: 200px;
background-color: black;
padding: 1rem;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane {
z-index: 2000;
animation: trans1 3s ease-in infinite forwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 3s linear infinite forwards;
}
#bottom .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite forwards;
}
#top {
width: 200px;
height: 15px;
left: 0;
z-index: 100;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#middle {
width: 187px;
height: 25px;
left: 6px;
top: 78px;
transform: skew(-15deg, -40deg);
border-radius: 20px;
}
#bottom {
width: 200px;
height: 15px;
top: 159px;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1 {
0% {
width: 0%;
left: 0;
}
33.33% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2 {
0% {
width: 0%;
left: 100%;
}
33.33% {
width: 0%;
left: 100%;
}
66.66% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3 {
0% {
width: 0%;
left: 0;
}
66.66% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>

CSS rolling ball animation position

General info
I'm working on a Bingo game. Currently I'm trying to create a CSS rolling ball animation. The idea is to simulate a ball dropping from the wheel and making it roll from right to left.
The problem
The animation is working fine. But the "drop in" position is relative to the div. As a consequence of this, this position keeps moving right 75 pixels on each new ball dropping in.
Solutions I've tried
- Give the balls an absolute position. This solves the issue, but each ball will cover the previous balls due to the keyframe ending at left: 0%. This is not desirable.
- Lookup Javascript solutions to see if I can somehow change the keyframe to end with +75px on the previous ball. Unfortunately it seems impossible to manipulate animations this way, or I was unable to find a way to do it.
So now I'm hoping someone is able to help me find a solution to this problem.
Edit: I didn't tag jQuery because it's not used here, but solutions using jQuery are perfectly fine.
MCVE
const timer = setInterval(rollBall, 2000);
var ballNumber = 1;
function rollBall(){
if(document.getElementById('ball-'+(ballNumber-1))){
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
let html = '<div id="ball-'+ballNumber+'" class="ball ball-animation">';
html += '<p class="ball-number">';
html += ballNumber;
html += '</p></div>';
document.getElementById('balls').innerHTML += html;
ballNumber++;
if(ballNumber > 10) {
clearInterval(timer);
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
}
.ball {
display: block;
position: relative;
width: 75px;
height: 75px;
background: red;
border-radius: 50%;
background: -webkit-radial-gradient(25px 25px, circle, red, #000);
background: -moz-radial-gradient(25px 25px, circle, red, #000);
background: radial-gradient(25px 25px, circle, red, #000);
/*position: absolute;*/
float: left;
}
.ball-number {
top: -34px;
left: 25px;
font-size: 45px;
color: #fff;
position: absolute;
}
.ball-animation {
-webkit-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-moz-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-ms-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
animation: spin 1750ms linear infinite, moveRightToLeft 2s linear;
-webkit-transition: all 1.75s ease;
transition: all 1.75s ease;
}
#keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
#keyframes moveRightToLeft {
0% { top: -50px; left: 200px; }
10% { top: -40px; left: 180px; }
20% { top: -25px; left: 150px; }
30% { top: 0px; left: 100px; }
100% { left: 0%; }
}
<div id="balls"></div>

This is a CSS only solution, using an intermediate div, zone to handle the ball movement .
Since this elements have varying sizes, you can set the keyframes on them to work in percentages, and adjust for a different ending point, while keeping the same origin point.
.container {
width: 600px;
height: 350px;
border: solid 1px red;
position: relative;
}
.zone {
position: absolute;
top: 0px;
right: 0px;
bottom: 40px;
left: 40px;
border: solid 1px green;
animation: move 3s linear infinite;
}
.zone:nth-child(2) {
left: calc(40px * 2);
}
.zone:nth-child(3) {
left: calc(40px * 3);
}
.zone:nth-child(4) {
left: calc(40px * 4);
}
.ball {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: blue;
right: 0px;
position: absolute;
}
#keyframes move {
from {transform: translate(0px, 0px);}
50% {transform: translate(-100px, 100%);}
to {transform: translate(-100%, 100%);}
}
<div class="container">
<div class="zone">
<div class="ball">1</div>
</div>
<div class="zone">
<div class="ball">2</div>
</div>
<div class="zone">
<div class="ball">3</div>
</div>
<div class="zone">
<div class="ball">4</div>
</div>
</div>

Rotating color change, something like the Edge lighting Android

I am trying to animate a rotating colour change around the border of my background something like the one shown in this link: https://www.youtube.com/watch?v=hmxA1qvZlxs
Have been searching for clues for a long time but have yet to find anything useful.
I am using ValueAnimator for the border color transition but am at a lost for making it 'spin' or 'rotate' as in the video. My Code as Follow:
ValueAnimator anim = new ValueAnimator();
anim.setIntValues(Color.parseColor("#FFFFFF"), Color.parseColor("#FFFF0000"));
anim.setEvaluator(new ArgbEvaluator());
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
bgShape.setStroke(10, (Integer)valueAnimator.getAnimatedValue());
}
});
anim.setDuration(10000);
anim.setRepeatCount(1);
anim.setInterpolator(new CycleInterpolator(10));
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.start();
Anyone with ideas or work around this problem that could point me in the right direction?

You could use plain CSS for this if using android WebView is ok for you. Something like this could achieve this kind of effect:
body {
font-family: sans-serif;
}
#mobile {
width: 350px;
height: 600px;
background: black;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#mobile:after {
content: "";
width: 20px;
height: 20px;
background: white;
position: absolute;
top: 5px;
left: 165px;
border-radius: 100%;
}
#background {
position: absolute;
background: white;
width: 310px;
height: 540px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#foreground {
position: absolute;
background: #333;
width: 300px;
height: 530px;
border-radius: 50px;
}
#rotating-box {
border-radius: 50px;
min-width: 200%;
height: 200%;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
background-image: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="mobile">
<div id="background">
<div id="rotating-box"></div>
</div>
<div id="foreground"></div>
</div>
</body>
</html>

Image slider got stuck after first button click

I got a question regarding an image slider that I am creating from scratch. I want to create it from scratch due to the fact that I do not need a lot of extra properties which I could get from using external sliders.
I have the following setup:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
$( "#slide-right" ).click(function() {
$(".hold-1").addClass('first');
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
What I am trying to achieve is that whenever I press the right button the margin got shifted towards the left. But I need some kind of mechanism to detect that. Have anyone an idea on how I could implement that? I do not ask for full code implementations. Any guidance is already very helpfull.
To be short: desired setup: being able to navigate through the images with the left and right button by shifting the margin towards left and right.
For a JSFIDDLE DEMO: JSFIDDLE

You are only adding the class first to your first holder.. (.hold-1). You can add an additional variable (counter) and add it the following way:
$(".hold-" + counter +"").addClass('first');
Have a look below:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;
$( "#slide-right" ).click(function() {
$(".hold-" + counter +"").addClass('first');
counter = counter + 1;
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Hope it helped

I've added/changed these lines of code:
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
What it does: It counts the amount of elements that has both class' image-holder & first. Then i adds 1, to get the value of the hold- class we want to add our class to
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
});
.col-slider {
position: relative;
z-index: 13;
margin-top: 0px;
width: 70%;
overflow: hidden;
height: 174px;
background-color: yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 15px;
float: left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2 {
font-family: Titillium Web;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
width: 85%;
text-align: center;
font-size: 36px;
}
.col-slider-buttons a {
margin-right: 10px;
display: inline-block;
margin-bottom: 30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>