I write my code like this: https://jsfiddle.net/9dgjkc9r/
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
<div class="question"></div>
But it doesn't have a fade in and fade out because when I move the mouse in another position it's displayed an ugly movement. I don't know how to add them.
Just start the transition from the initial position and break the transition down into 4 keyframes like so:
0% {
-webkit-transform: rotate(0deg)
}
25% {
-webkit-transform: rotate(-3deg)
}
75% {
-webkit-transform: rotate(3deg)
}
100% {
-webkit-transform: rotate(0deg)
}
Here is the JSFiddle demo
(At least what I understood u wanted :) )
is this what you want.copy full code and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
$("div.question").mouseenter(function(){
$(this).fadeOut(1000).fadeIn(1000);
});
});
</script>
</body>
</html>
or if you want to do fadein and out infinite time, then try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
check(1000);
});
function check(i)
{
$(".question").fadeOut(1000).fadeIn(1000);
setTimeout("check()",i);
}
</script>
</body>
</html>
Related
I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; but seems only for SVG, How to apply it to the html element border?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="loader"></div>
</body>
</html>
You can do it with some background applied to a pseudo element:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position:relative;
}
.loader::before {
content:"";
position:absolute;
width:100%;
top:0;
height:20px;
--rad:radial-gradient(circle 8px,#3498db 99%,transparent 100%);
background:
var(--rad) left -14px top 0,
var(--rad) right -14px top 0;
background-size:200% 100%;
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
Related question to get a different idea: CSS curved line with rounded
So I am Pretty new to programming and I just started with html, css, JavaScript and a bit of php. I've tried to make a dropdown menu with animations. It works prety god but now i want to add "reverse" animations for the menu Options but i can't get it to work without playing the "fade out" Animation when the Options are loaded. I hope my Problem is clear enought and I'm Looking Forward to find someone who can help me out with my problem. ps: I'm german so sorry for grammar mistakes ;)
index.html:
<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template.css"/>
<head>
<title>Stephen's Site</title>
</head>
<body>
<div id="menu1"><font color="c079da">Instagram</font></div>
<div id="menu2"><font color="da5148">Youtube</font></div>
<div id="menu3"><font color="68b9e1">Twitter</font></div>
<div id="menu4"><font color="000">Menutest V2</font></div>
<div id="bild1"></div>
<div id="link1"><font color=000">Menutest V1</font></div>
<!-- <div class="dropdown">
<div class="dropdown-button">
Menu
</div>
<ul>
<li>Spalte 1</li>
<li>Spalte 2</li>
<li>Spalte 3</li>
<li>Spalte 4</li>
</ul>
</div>
-->
<div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
</body>
</html>
"menutest.html"(where the Dropdown items are in):
<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template3.css"/>
<head>
<title>Stephen's Site</title>
</head>
<body>
<div class="dropdown">
<div class="dropdown-button">
Menu</div>
<ul class="opt">
<li><font color="000"<div id="opt1">Hauptseite</font></li>
<li><font color="000"<div id="opt2">Hauptseite2</font></li>
<li><font color="000"<div id="opt3">Hauptseite3</font></li>
<li><font color="000"<div id="opt4">Hauptseite4</font></li>
</ul>
</div>
<div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
</body>
</html>
template3.css (css file for Dropdown menu) :
background-image: url(../images/background.png);
margin: 0px;
padding: 0px;
font-size: 14px;
background-color: #F9EBAE;
background-repeat: repeat-x;
}
#credit1 {
font-size: 25px;
width: 100px;
height: 100px;
margin-left: 5px;
margin-top: 3400px;
border: 3px solid #cfcecf;
}
.dropdown{
margin: 0 auto;
margin-top: 50px;
width: 150px;
}
.dropdown-button {
padding: 10px;
background: white;
}
.dropdown-button a{
color: #333;
text-decoration: none;
*border: 3px solid #cfcecf;
}
.dropdown ul{
list-style-type: none;
background: white;
*border: 3px solid #cfcecf;
animation: load 1s forwards;
}
.dropdown ul li{
margin-top: 0px;
padding: 10px 5px;
*background: white;
display: none;
opacity: 0;
animation: load 1s forwards
}
.dropdown:hover li{
animation: load 0.3s forwards;
display: block;
}
#keyframes load {
0%{
transform: scale(0) translateX(100px) rotate(-45deg);
}
100%{
opacity: 1;
transform: scale(1) translateX(0px) rotate(0);
/*box-shadow: 0px 0px 10px black;*/
}
0%{
transform: scale(0) translateX(100px) rotate(-45deg);
}
}
#opt1:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt2:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt3:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt4:hover {
animation: opt 0.5s forwards;
display: block;
}
#keyframes opt{
0%{
transform: scale(1);
}
100%{
transform: scale(1.4);
}
}
#opt1 {
animation: optout 1s forwards;
display: block;
}
#opt2 {
animation: optout 1s forwards;
display: block;
}
#opt3 {
animation: optout 1s forwards;
display: block;
}
#opt4 {
animation: optout 1s forwards;
display: block;
}
#keyframes optout {
0%{
transform: scale(1.4);
}
100%{
transform: scale(1);
}
}```
I want to animate the divs in HTML and CSS as shown in the videoPlease find Video here. I had tried something but it is not working as my divs have 2 types of animation at a time. Please help with it. Thanks in advance.
My code snippet is -
<div className="container">
<div className="content">R</div>
<div className="content">E</div>
<div className="content">D</div>
<div className="content">B</div>
<div className="content">O</div>
<div className="content">O</div>
<div className="content">K</div>
</div>
And CSS file is -
div.container {
height: 200px;
border: 2px solid #ddd;
padding: 5px;
display: inline-block;
}
div.stone {
height: 20px;
width: 20px;
border: 1px solid #bbb;
border-radius: 4px;
display: inline-block;
float: left;
margin-left: 5px;
color: white;
padding: 10px;
text-align: center;
font-size: 18px;
background-color: #fa7878;
-webkit-animation: spin 1s linear;
-moz-animation: spin 1s linear;
animation: spin 1s linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
10% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
div.stone:first-child {
// sepatrate animation code
}
This may seem like such a noob question, but I'm quite new with HTML and CSS.
Anyways, my problem is that on my computer, the website I'm working on looks totally fine zoomed in at 100%, normal. When I zoom out, the image on my "loading screen" moves around the screen and same when I zoom in.
Also, on other computers, the image is to the left of the text "Loading..." and some computers have it to the right of the text. Also on mobile, the background and text are way at the top of the screen while the image is in the middle of the screen on a white background.
The website page can be seen here at http://santatracking.net/loading.html
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<META HTTP-EQUIV="Refresh" CONTENT="1.5;URL=homevillage.html">-->
<script src="script.js"></script>
<link rel="stylesheet" href="loadingstyle.css">
<link rel="preload" href="styles.css">
<link rel="icon" type="favicon/png" href="http://santatracking.net/wp-content/uploads/2016/01/cropped-Team-yantsu-logo-transparent.png">
<title>SantaTrackingLive</title>
</head>
<body>
<div id="wrapper">
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
<div id="loading">
<img class="image" src="loadingimg.png" alt="" width="200" height="200">
</div>
</div>
</body>
</html>
Here is my CSS code
#font-face {
font-family: mo;
src: url(museo.ttf);
}
body {
font-family: mo;
background-image: url("bg.png");background-repeat: repeat;
background-size: cover;
}
.text {
position: absolute;
width: 300px;
height: 70px;
font-size: 30px;
margin: 426px 0 0 460px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
#loading {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -90px 0 0 -100px;
-webkit-animation:spin 1.25s linear infinite;
-moz-animation:spin 1.25s linear infinite;
animation:spin 1.25s linear infinite;
outline: 1px solid transparent; -->
}
#-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); } }
#wrapper {
height: auto;
width: 1200px;
margin: 0 auto;
}
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
If any one could help me out on this, that'd be great. Sorry again for the possible noob sounding question haha
Thanks again
You need to use JavaScript for that because your browser does not know the resolution of your screen, for eg your computer is 1080 during full size but when you resize to smaller width and moves to next line. You have to use window.width to get width of your window and use DOM to manipulate HTML
I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.
You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>