I have used animation of translate(). The link to the code is here Bouncy animation
But it starts off abruptly at the bottom. How to give it a smooth start. Also notice the animation distorts in between. How to remove such error?
The code is below:
body{background: #92348A;
font-family:'Helvetica Neue',Arial, Helvetica, sans-serif;}
.wrapper{ margin-left:370px;
margin-top:195px;
position:absolute;
}
p{ font-family: "Comic Sans MS", cursive;
font-weight:900;
}
.one{width:50px;
height:50px;
float:left;
margin:0.5em;
position:relative;
border-radius:100%;
background: #F00;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.2s infinite ;
}
.two{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #9D1A76;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.38s infinite;}
.three{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0080;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.3s infinite;}
.four{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.35s infinite;}
.five{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0ECAF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.23s infinite;}
.six{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0BF451;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.1s infinite;}
.seven{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #645CF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.14s infinite;}
#-webkit-keyframes bounce{
2%{ transform: translateY(120px);}
50%{ transform:translateY(-90px);}
100%{ transform:translateY(120px);}
}
<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>
#harcos answer is correct, but does not have a smooth start.
Add the transform:translateY(-90px);
to all the different animation classes for them to be rendered where the animation starts.
body {
background: #92348A;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.wrapper {
margin-left: 370px;
margin-top: 195px;
position: absolute;
}
p {
font-family: "Comic Sans MS", cursive;
font-weight: 900;
}
.one {
width: 50px;
height: 50px;
float: left;
margin: 0.5em;
position: relative;
border-radius: 100%;
background: #F00;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.2s infinite;
}
.two {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #9D1A76;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.38s infinite;
}
.three {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0080;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.3s infinite;
}
.four {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.35s infinite;
}
.five {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0ECAF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.23s infinite;
}
.six {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0BF451;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.1s infinite;
}
.seven {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #645CF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.14s infinite;
}
#-webkit-keyframes bounce{
0%{ transform:translateY(-90px);}
50%{ transform:translateY(120px);}
100%{ transform:translateY(-90px);}
}
<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>
#-webkit-keyframes bounce{
0%{ transform:translateY(-90px);}
50%{ transform:translateY(120px);}
100%{ transform:translateY(-90px);}
}
body{background: #92348A;
font-family:'Helvetica Neue',Arial, Helvetica, sans-serif;}
.wrapper{ margin-left:370px;
margin-top:195px;
position:absolute;
}
p{ font-family: "Comic Sans MS", cursive;
font-weight:900;
}
.one{width:50px;
height:50px;
float:left;
margin:0.5em;
position:relative;
border-radius:100%;
background: #F00;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.2s infinite ;
}
.two{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #9D1A76;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.38s infinite;}
.three{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0080;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.3s infinite;}
.four{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.35s infinite;}
.five{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0ECAF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.23s infinite;}
.six{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0BF451;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.1s infinite;}
.seven{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #645CF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.14s infinite;}
#-webkit-keyframes bounce{
2%{ transform: translateY(120px);}
50%{ transform:translateY(-90px);}
100%{ transform:translateY(120px);}
}
<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>
Related
I have a question. I wanted to use a button from codepen.io on my website (this one: https://codepen.io/emared/pen/RYgbaJ/). Everything works with the button but it appears on the end of my website. I want it to be just below my text. Here's my code:
<h3 style="padding-top: 35;">
Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
And in my CSS-Document I just pasted everything from the codepen page.
Now this is what it looks like: https://ibb.co/G3cmGdQ
Why's there that huge space between "Text" and the button?
Thanks for your help! 🙏
Look at the following code:
#import url('https://fonts.googleapis.com/css?family=Montserrat:900');
body{
margin:0;
padding:0;
background-color:#292929;
font-family: 'Montserrat', sans-serif;
}
.heading {
text-align: center;
margin-top: 50px;
color: #fff;
}
#wrapper{
margin-bottom: 30px;
width:100vw;
height:100vh;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
}
.my-super-cool-btn{
position:relative;
text-decoration:none;
color:#fff;
letter-spacing:1px;
font-size:2rem;
box-sizing:border-box;
}
.my-super-cool-btn span{
position:relative;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:200px;
}
.my-super-cool-btn span:before{
content:'';
width:100%;
height:100%;
display:block;
position:absolute;
border-radius:100%;
border:7px solid #F3CF14;
box-sizing:border-box;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn:hover span:before{
transform:scale(0.8);
box-shadow: 0 20px 55px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn .dots-container{
opacity:0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot{
width:8px;
height:8px;
display:block;
background-color:#F3CF14;
border-radius:100%;
position:absolute;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1){
top:50px;
left:50px;
transform:rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(2){
top:50px;
right:50px;
transform:rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(3){
bottom:50px;
left:50px;
transform:rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(4){
bottom:50px;
right:50px;
transform:rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn:hover .dot:nth-child(1){
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2){
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3){
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4){
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes swag1 {
0% {
top:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag1-out {
0% {
top:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag2 {
0% {
top:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag2-out {
0% {
top:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
right:50px;
width:8px;
opacity:0;
}
}
#keyframes swag3 {
0% {
bottom:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag3-out {
0% {
bottom:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag4 {
0% {
bottom:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag4-out {
0% {
bottom:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
right:50px;
width:8px;
opacity:0;
}
}
<h3 class="heading">Text goes here</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
Please check the code below:
#import url("https://fonts.googleapis.com/css?family=Montserrat:900");
body {
margin: 0;
padding: 0;
background-color: #292929;
font-family: "Montserrat", sans-serif;
}
.title {
text-align: center;
color: #fff;
font-size: 50px;
padding-top: 35px;
margin: 0;
}
#wrapper {
margin-bottom: 30px;
width: 100vw;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.my-super-cool-btn {
position: relative;
text-decoration: none;
color: #fff;
letter-spacing: 1px;
font-size: 2rem;
box-sizing: border-box;
}
.my-super-cool-btn span {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
}
.my-super-cool-btn span:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
border-radius: 100%;
border: 7px solid #f3cf14;
box-sizing: border-box;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn:hover span:before {
transform: scale(0.8);
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn .dots-container {
opacity: 0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot {
width: 8px;
height: 8px;
display: block;
background-color: #f3cf14;
border-radius: 100%;
position: absolute;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1) {
top: 50px;
left: 50px;
transform: rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(2) {
top: 50px;
right: 50px;
transform: rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(3) {
bottom: 50px;
left: 50px;
transform: rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(4) {
bottom: 50px;
right: 50px;
transform: rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn:hover .dot:nth-child(1) {
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2) {
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3) {
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4) {
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes swag1 {
0% {
top: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag1-out {
0% {
top: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag2 {
0% {
top: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag2-out {
0% {
top: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag3 {
0% {
bottom: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag3-out {
0% {
bottom: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag4 {
0% {
bottom: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag4-out {
0% {
bottom: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
<h3 class="title">Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
I am working on css animation transition.I have div id mybus. It's position is relative. It is the container of multiple divs position relative. I am trying to move the mybus which is the container of all other divs using animation transform: translateX(). It's not woking. (Question is, does position matter while animation?)
I separately applied animation which is transform: rotate() to the div class wheels (It is also inside mybus)which is working well. (I did't include this part of code ) I can give more info about code if needed.
.mybus{
position: relative;
animation-name:busgo;
animation-duration: 10s;
animation-iteration-count: 2;
animation-timing-function: linear;
/* animation-delay: 3s;*/
}
#keyframes busgo{
0%{
transform: translateX(20px);
}
100%{
transform: translateX(-1220px);
}
}
.busBody{
background-color: yellow;
position: absolute;
}
#front{
height:60px;
width:70px;
top:130px;
left:200px;
border-top-left-radius: 5px;
}
#back{
height:90px;
width:200px;
top:100px;
left:270px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.window{
height:20px;
width:30px;
background-color: dimgray;
position: absolute;
border-radius: 2px;
}
#w1{
top:110px;
left:300px;
}
#w2{
top:110px;
left:360px;
}
#w3{
top:110px;
left:420px;
}
<div id="mybus">
<div class="busBody" id="front"></div>
<div class="busBody" id="back"></div>
<div class="window" id="w1"></div>
<div class="window" id="w2"></div>
<div class="window" id="w3"></div>
<div class="wheel" id="wh1"></div>
<div class="wheel" id="wh2"></div>
<div class="headlight"></div>
</div>
You were using .mybus instead of #mybus
#mybus{
position: relative;
animation-name:busgo;
animation-duration: 10s;
animation-iteration-count: 2;
animation-timing-function: linear;
/* animation-delay: 3s;*/
}
#keyframes busgo{
0%{
transform: translateX(20px);
}
100%{
transform: translateX(-1220px);
}
}
.busBody{
background-color: yellow;
position: absolute;
}
#front{
height:60px;
width:70px;
top:130px;
left:200px;
border-top-left-radius: 5px;
}
#back{
height:90px;
width:200px;
top:100px;
left:270px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.window{
height:20px;
width:30px;
background-color: dimgray;
position: absolute;
border-radius: 2px;
}
#w1{
top:110px;
left:300px;
}
#w2{
top:110px;
left:360px;
}
#w3{
top:110px;
left:420px;
}
<div id="mybus">
<div class="busBody" id="front"></div>
<div class="busBody" id="back"></div>
<div class="window" id="w1"></div>
<div class="window" id="w2"></div>
<div class="window" id="w3"></div>
<div class="wheel" id="wh1"></div>
<div class="wheel" id="wh2"></div>
<div class="headlight"></div>
</div>
I've just recently started working on a company's Joomla page. Because I'm so new at this they will not give me super administrator privileges so I cannot add JS nor add extensions which would solve my issue a lot quicker.
Anyway, I've been requested to make an automatic scrolling banner with controls (play/pause, previous, next).
I've found a couple of CSS only banners but they don't all seem have the same options.
I'm currently using this one:
http://codepen.io/Eliteware/full/BoBgqV/
<head>
<style>
/* Reset */
*{margin:0;padding:0;}
/* Slider */
#slider{
width:100%;
height:360px;
position:relative;
overflow:hidden;
}
#keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:100%;
}
/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid rgba(52, 73, 94, .7);
border-bottom:0;
position:absolute;
bottom:0;
}
/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Intro;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:Quicksand;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}
/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#14b0d3
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}
/* Animation */
#-webkit-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#-moz-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#-webkit-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#-moz-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#-webkit-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
#-moz-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
#keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
</style>
</head>
<body>
<div class="i-contenedor">
<div style="width:1024px;height:auto;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">
<div id="slider">
<div class="slides">
<!-- First slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080255.png">
</div>
</div>
<!-- Second slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080905.png">
</div>
</div>
<!-- Third slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080924.png">
</div>
</div>
<!-- Fourth slide -->
<div class="slider">
<div class="images">
<img src="images/ach_comunicacion_feb_27.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
It works perfectly and has automatic reproduction of the slides like I wanted vía keyframes. I managed to change the size to suit my needs.
Now I need to add the controls but I'm stuck because I can barely understand some of the things that are being done with this CSS.
Now, here is another option: http://qnimate.com/creating-a-slider-using-html-and-css-only/. A much simpler code that has a way for me to choose which slide I want. But no automatic reproduction nor a way to pause.
<!doctype html>
<html>
<head>
<title>QNimate Slider</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-holder">
</div>
</div>
</body>
</html>
And the CSS
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
I mostly want to learn how to join certain elements to create a simple CSS and HTML only image slider because I've been searching forever and I never get exactly what I need.
I know the basic structure and elements of the image slider.
Slider container
slide
image
Arrows the slide I'm on
dots that control the slide I'm on
Pause/play button which pauses or plays the slide I'm on
Here is the code:
HTML:
<div class="connectContainer">
<div class="outerCircle">
<div class="innerCircle">
<div class="imgDiv">
<img class="connectLink" src="car.png">
</div>
</div>
</div>
</div>
CSS:
.connectContainer {
position:relative;
height:200px;
width:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
margin-top:30px;
}
.imgDiv {
width:150px;
height:150px;
position:absolute;
}
.connectLink {
position:absolute;
height:67px;
width:110px;
top:41px;
left:20px;
}
.innerCircle {
position:absolute;
border:2px solid #43cee6;
width:150px;
height:150px;
border-radius:100%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.outerCircle {
position:absolute;
border:2px solid #43cee6;
width:190px;
height:190px;
border-radius:100%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}
I'm using Google Chrome Version 47.0.2526.73 (64-bit).
All the animation and other properties are working absolutely fine.
I tried changing the border-width and it changes as well.
Only the border-radius doesn't work. I'm getting squares instead of circles.
Also, the ionic version of this code for a mobile app gives me the circles!
Please help.
For making any circle you have to change your border-radius property 50% then it will works as circle.
Your .innerCircle and .outerCircle class exists with 100% of border radius value change it to 50% for getting circle.
.innerCircle {
position:absolute;
border:2px solid #43cee6;
width:150px;
height:150px;
border-radius:50%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.outerCircle {
position:absolute;
border:2px solid #43cee6;
width:190px;
height:190px;
border-radius:50%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}
This is your fiddle http://jsfiddle.net/7xewv0f5
I see it works normally. Try inspect elements to find other css which is overwriting your border-radius
<div class="connectContainer">
<div class="outerCircle">
<div class="innerCircle">
<div class="imgDiv">
<img class="connectLink" src="car.png">
</div>
</div>
</div>
</div>
Try This in your code to get proper output. you can change top,left,width,height according to your requirement.
.connectContainer {
position: relative;
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
margin-top: 30px;
}
.outerCircle {
position: absolute;
border: 2px solid #43cee6;
width: 190px;
height: 190px;
border-radius: 100%;
margin: 0 auto;
-webkit-animation-name: changeOuterBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.innerCircle {
position: absolute;
border: 2px solid #43cee6;
width: 150px;
height: 150px;
border-radius: 100%;
left: 20px;
top: 20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.imgDiv {
width: 150px;
height: 150px;
position: relative;
border-radius: 10px;
}
.connectLink {
position: absolute;
height: 110px;
width: 110px;
top: 20px;
left: 20px;
border-radius: 100%;
}
I'm trying to create something like this without SVG ? is it possible ?
Demo
Fiddle
.hover {
background: salmon;
text-align: center;
width: 70px;
height: 50px;
transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.hover:hover {
border: 2px solid grey;
}
<div class="hover">hover me</div>
Not exactly like it but almost there
.container {
display:inline-block;
overflow:hidden;
position:relative;
}
.container div {
position:relative;
width:200px;
height:200px;
background:grey;
transition:.5s all;
}
.container:before {
content:"";
position:absolute;
top:198px;
left:0;
width:200px;
height:2px;
z-index:2;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:after {
content:"";
position:absolute;
top:0;
right:00px;
width:2px;
height:200px;
background:orange;
transition:.5s all;
}
.container div:after {
top:0px;
content:"";
position:absolute;
width:200px;
height:2px;
background:orange;
transition:.5s all;
}
.container div:before {
top:0px;
left:0px;
content:"";
position:absolute;
width:2px;
height:200px;
background:orange;
transition:.5s all;
transition-delay:.5s;
}
.container:hover:after{
height:0;
}
.container:hover:before{
width:0;
}
.container div:hover:after {
width:0;
}
.container div:hover:before {
height:0;
}
<div class="container">
<div></div>
</div>
are you looking for something like this?
#keyframes width{
0%{width:100%; height:0%;}
50%{width:10%; height:10%;}
100%{width:0%; height:100%;}
}
#keyframes height{
0%{width:0%; height:100%;}
50%{width:10%; height:10%;}
100%{width:100%; height:0%;}
}
.effect{float:left; margin:15px; position:relative;}
.effect .content{ top:0px; left:0px; right:0px; bottom:0px; background-color:transparent; color:#000;}
.effect div{ width:100%; height:100%; position:absolute;
animation-fill-mode:forwards;}
.effect .top{top:-1px; left:-1px; border-top:1px solid #aaa; border-left:1px solid #aaa;}
.effect .bottom{bottom:-1px; right:-1px; border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
.effect .left{left:-1px; bottom:-1px; border-bottom:1px solid #aaa; border-left:1px solid #aaa;}
.effect .right{top:-1px; right:-1px; border-right:1px solid #aaa; border-top:1px solid #aaa;}
.effect:hover .top{animation:width 0.7s ease-in 0s 1;}
.effect:hover .bottom{animation:width 0.7s ease-in 0s 1;}
.effect:hover .left{animation:height 0.7s ease-in 0s 1;}
.effect:hover .right{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .top{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .bottom{animation:height 0.7s ease-in 0s 1;}
.effect:not(:hover) .left{animation:width 0.7s ease-in 0s 1;}
.effect:not(:hover) .right{animation:width 0.7s ease-in 0s 1;}
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
<div class="effect">
Try hover
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
Yes, though I can't write the CSS for you at the moment. It's simply a matter of using :hover to change the height and width or padding or border of that element. Use transitions for a smooth effect. You don't need animation or SVG at all.
CSS
.test {
display: inline-block;
border-radius: 0px;
border: 1px solid pink;
transition: all 1s;
}
.test:hover {
border-radius: 0 20px;
border: 20px solid rgba(0, 0, 0, 0.5);
background-color: purple;
color: yellow;
padding: 50px;
font-size: 30px;
}
<div class="test">hover me for fun and exitment</div>
.box {
fill: #4a2;
stroke: #412;
stroke-width: 1;
transition: all 1s;
}
.box:hover {
stroke-width: 5;
stroke: #22a;
fill: red;
}
<svg width="200px" height="200px" viewBox="0 0 100 100">
<rect class="box" x="20" y="50" width="50" height="30" />
</svg>