I am trying to make css3 spinner (loader). It works fine without .
But when I use , the css code is not loading.
See demo-
without doctype --> http://echakri.net/css-animation/witouthdoctype.html (work fine)
with doctype--> http://echakri.net/css-animation/withdotype.html (not work)
My code:
Html:
<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>
Css:
.Loaderw {
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
float: right;
}
.Loaderw > div {
background-color: green;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.Loaderw .loader2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.Loaderw .loader3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.Loaderw .loader4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.Loaderw .loader5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>
How I solve this problem?
Thanks in advance.
The HTML and CSS between the sites is different. In the page with the doctype, change the #loaderw class from lower-case to upper-case to match your CSS.
<div id="loaderw" class="loaderw">
to
<div id="loaderw" class="Loaderw">
Alternatively, you can change all of the .Loaderw classes in your CSS to .loaderw - whatever's easier. But CSS is case-sensitive, so those need to match somehow.
Related
How to make it so that when the page is opened, first picture is immediately displayed and only then the slider animation starts?
css
.container_slider_css {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.photo_slider_css {
position: absolute;
animation: round 24s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
35% {
opacity: 1;
}
50% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 16s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 0s;
}
html
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
I am not sure what you exactly meant. I assume you want the slider to start animating/sliding? You'd need to use a line of Javascript - window.onload and write a function that enables certain css element to load.
window.onload = function() {}
I want to animate the image from left side to right side.
#pot{
position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% { left: 0%;}
100%{ left : 100%;}
}
<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>
how can I re-enter the image from left side??
Try this way.
#pot {
position: relative;
overflow: hidden;
}
.images {
animation: run 5s linear infinite;
}
.images img:nth-child(2) {
position: absolute;
left: -100%;
}
#keyframes run {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
<div id="pot">
<div class="images">
<img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
<img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
</div>
</div>
use a translation to have a generic solution
#pot {
overflow:hidden;
}
#pot img{
position: relative;
animation: run 2s linear infinite;
}
#keyframes run {
0% {
left: 0%;
transform: translateX(-100%)
}
100% {
left: 100%;
}
}
<div id="pot">
<img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px">
</div>
<div id="pot">
<img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="50px" >
</div>
#pot{
position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0%{ left : -50%;}
100%{ left: 100%;}
}
<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1"width = "100px" height ="100px">
</div>
#pot{
position:absolute;
-webkit-animation:both;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
50% { left: 50%;}
0%{ left : 0%;}
}
<div id = "pot">
<img src = "https://imgur.com/gallery/GLyfR" width = "100px" height ="100px">
</div>
You can use this https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction
I have some text in html that I want to animate
<div class="sofa-text inner-text">
<h1>Sofa, we have cool sofas</h1>
</div>
<div class="light-text inner-text">
<h1>our stand light is out-standing</h1>
</div>
and here's CSS
.inner-text {
display: none;
width: 100px;
height: 100px;
background-color: black;
position: absolute;
transition: 1s;
transform: translateY(200%);
animation-name: slide-up;
animation-duration: 2s;
animation-delay: .5s;
}
#keyframes slide-up{
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}
and I wanted to display this animation, after the button was clicked
let $sofaText = document.querySelector('.sofa')
let $lightText = document.querySelector('.light')
let showSofa = () => {
$sofaText.style.display = 'flex'
}
let showStand = () => {
$lightText.style.display = 'flex'
}
$sofaBtn.addEventListener('click', showSofa)
$standBtn.addEventListener('click', showStand)
However this doesn't work. I tested step by step and problem was in #keyframes. I even added -webkit but it still didn't work. I have no idea what's wrong with this
It's working you just can't see it because display:none;
function tran(){
let t = document.querySelector('.sofa-text');
t.classList.add("anim");
t.style.display = "flex";
}
.inner-text {
display:none;
width: 100px;
height: 100px;
background-color: black;
position: absolute;
transition: 1s;
transform: translateY(200%);
}
.anim{
animation-name: slide-up;
animation-duration: 2s;
animation-delay: .5s;
}
#keyframes slide-up{
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}
<button onclick="tran()">click</button>
<div class="sofa-text inner-text">
<h1>Sofa, we have cool sofas</h1>
</div>
<div class="light-text inner-text">
<h1>our stand light is out-standing</h1>
</div>
I am trying to recreate the following effect (click one of the colours on this page to see what I mean: http://flatuicolors.com) on an overlay when a link is clicked.
The transition is something like this: An overlay with a success message scales out and fades in, pauses and then scales out and fades out.
However, it is not producing the desired effect. What's more, the scaling is not visible at all. Any help is much appreciated.
html, body { height: 100%; }
.container {
position: relative;
margin: 0 auto; }
.container.questionnaire {
background:#f1c40f;
width: 100%;
max-width: 100%;
height: 100%;
}
.row-flex.buttons-only {
height:100%;}
.row-flex {
display: table;
width: 100%; }
.column {
box-sizing: border-box; }
.one-third-flex.column {
width: 33.3333%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:#1abc9c;
z-index: 10;
}
h1.success-message { display: table-cell; text-align: center;
vertical-align: middle;}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;transform: scale(2);}
40% {opacity: 1;transform: scale(1.5);}
60% {opacity: 1;transform: scale(1.5);}
100% {visibility:hidden; opacity: 0;transform: scale(1);}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1; transform: scale(2);}
40% {opacity: 1;transform: scale(1.5);}
60% {opacity: 1;transform: scale(1.5);}
100% {visibility:hidden;opacity: 0; transform: scale(1);}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<body>
<div class="overlay animated fadeOut"><h1 class="success-message">Success</h1></div>
<div class="container questionnaire">
<div class="row row-flex buttons-only">
<div class="one-third-flex column"></div>
<div class="one-third-flex column" style="background-color: #f4f4f4;">
<div role="button" class="ico-btn btn-settings-lg">CLICK
</div>
</div>
<div class="one-third-flex column"></div>
</div>
</div>
</body>
Well, I hope this answer may help you.
As I thought that was an interesting effect (created with flash), I have worked a bit creating it from scratch with css3 and jquery. It was easier for me to do my code insteed of trying to modify yours so that’s why It maybe not be usefull for You but maybe it may be for other users.
The html is simple:
<div class="square ">
</div>
<div class="effect ">
<div class="text">TEXT HERE</div>
</div>
Where square is the area to click and effect is the container of the animation, which is a div with 0 height and width placed at the center of the window in case you want to add more animations (as to make it “grow” or shrink).
With, also, some simple jquery:
$('. square).click(function () {
$('. effect).addClass("animation");
$('.text').addClass("text-effect");
setTimeout(function () {
$('. effect).removeClass("animation");
$('.text').removeClass("text-effect");
}, 1500);
});
to add a class to effect and text on click and remove it after animation is done
Then after some basic CSS styles I made the animation for effect:
.animation {
animation-name: background;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
}
#keyframes background {
0% {height:100%; width:100%; opacity:1}
80% {height:100%; width:100%; opacity:1}
99.999% {height:100%; width:100%; opacity:0}
100% {height:0; width:0; opacity:0}
}
And for the text I have just used a transition:
.text {
background-color:rgba(255,255,255,0.6);
width:100%;
text-align:center;
font-size:50px;
color:#fff;
font-weignt:bold;
text-shadow: 1px 1px 0 #000000;
font-family:arial;
padding:20px 0;
transition:all 0.2s linear;
position:absolute;
top:50%;
transform: translateY(-50%);
transition:all 0.2s linear;
}
.text-effect {
padding:10px 0;
font-size:40px;
}
All toguether and adding 8 squares with different colors:
JSFIDDLE
and, as I wrote above, the background fading and shrinking just with
#keyframes background {
0% {height:100%; width:100%; opacity:1}
80% {height:100%; width:100%; opacity:1}
100% {height:0; width:0; opacity:0}
}
JSFIDDLE2
what I mean in the title is, no matter which container is on top (is visible) in the fade-style animation, the href in the "onclick" is always the same.
here is the html
<div id="teaserslider">
<ul>
<li>
<section id="container_1">
<div class="head gradient-top loading" onclick="document.location.href='container1_detail.html'">
<div>
<!-- Content -->
</div>
</div>
</section>
</li>
<li class="animation">
<section id="container_2">
<div class="head gradient-top loading" onclick="document.location.href='container2_detail.html'">
<div>
<!-- Content -->
</div>
</div>
</section>
</li>
</ul>
</div>
here is the css
#teaserslider{
height: 100px;
margin-bottom: 6px;
}
#teaserslider li {
position: absolute;
list-style: none;
-webkit-transition: opacity 1s ease-in-out;
}
#-webkit-keyframes fadeout{
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#teaserslider li.animation {
-webkit-animation-name: fadeout;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-transform: translateZ(0);//hardware acceleration
}
you may have noticed, I only use the webkit engine because this code runs inside a Phonegap Application for iOS.
No matter which container is showed currently, when I click the container I always get to "container2_detail.html". Anyone know how to solve this? thanks.
May be you have to define z-index to it. Write like this:
#-webkit-keyframes fadeout{
0% {
opacity:1;
z-index:1;
}
45% {
opacity:1;
z-index:1;
}
55% {
opacity:0;
z-index:-1;
}
100% {
opacity:0;
z-index:-1;
}
}
I tried this and it seems to work
#-webkit-keyframes fadeout{
0% {
opacity:1;
z-index: 1;
display: block;
}
45% {
z-index: 1;
display: block;
opacity:1;
}
55% {
z-index: -1;
display: none;
opacity:0;
}
100% {
z-index: -1;
display: none;
opacity:0;
}
}