I'm practicing html and having problem.
First, my code:
i:hover{
transform: rotate(360deg);
transition: 1s all;
}
i{
transition: 1s all;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car">This is a car.</i>
</body>
</html>
I want to make my icon spin when hovering at icon and text, but when I hover with this code, entire text spins. What should I do to make my car spin without spinning the whole line? Do I have to use javascript in this?
Rotate the pseudo-element that create the icon:
i:hover::before {
transform: rotate(360deg);
}
i:before {
display: inline-block;/* mandatory to be able to use transform */
transition: 1s all;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-car">This is a car.</i>
Related
I've made a nice film grain animation that im putting over a webpage to make a nice 4:3 old movie type look, however, I cant work out how to confine the animation to the div. I'm using Bootstrap if it effects it. Basically, I only want the grain to be inside the div so that it creates a black bar look outside. Many thanks! Code as follows:
#titleName {
font-family: 'Abril Fatface', cursive;
font-size: 4vw;
text-align: center;
white-space: nowrap;
background-color: rgb(68, 68, 68);
color: rgb(255, 255, 255);
margin-top: 0px;
}
#titleName:after {
animation: grain 2s steps(3) infinite;
background-image: url("http://creativeloads.com/foto/seamless-film-grain-294.jpg");
content: "";
height: 300%;
left: -50%;
opacity: 0.1;
position: fixed;
top: -100%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0)
}
10% {
transform: translate(-5%, -10%)
}
20% {
transform: translate(-15%, 5%)
}
30% {
transform: translate(7%, -25%)
}
40% {
transform: translate(-5%, 25%)
}
50% {
transform: translate(-15%, 10%)
}
60% {
transform: translate(15%, 0%)
}
70% {
transform: translate(0%, 15%)
}
80% {
transform: translate(-15%, 5%)
}
90% {
transform: translate(-10%, 10%)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="scss/custom.scss">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<title>Home</title>
</head>
<body style="background-color:rgb(0, 0, 0);">
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<header>
<!-- Nav Bar -->
</header>
<main>
<!--- Content -->
<div id="titleName" class="container">
TITLE
<div class="noise"></div>
</div>
</main>
<footer>
<!--- Footer -->
</footer>
</body>
</html>
From what I gathered regarding your code it seems like you have no set width or height to your container, if you want to limit your child element you can set its parent width and let your grain be width: 100%;
Another solution is to create an svg rectangle and use it as a clip-path to your div.
{I’ll add the code once I’m on my laptop}
Im having issue here. This works on Chrome but I cannot get any animations to work inside index.html for IE11. I get a static screen when it doesn't feel like working. Also in IE the message doesn't go away as it should. If I place the div inside Nothing shows at all in IE.
Does anyone have a good method of implementing a working animated screen inside index.html while bootstrap is loading? My css works some of the time in IE 11
My example that I have tried to use
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>My App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="bacicon.ico">
<script type="text/javascript"></script>
<style>
.loading {
opacity: 0;
transition: opacity 0 ease-in-out 1s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, app-root is empty */
app-root:empty + .loading {
opacity: 1;
z-index: 100;
}
app-root:empty + .loading h1 {
position: absolute;
color: #eee;
top: 50%;
width:100%;
text-align: center;
transform: translate(0, -50%)
}
}
</style>
</head>
<body style="margin-top: 0px" >
<app-root>
</app-root>
<div class="loading">
<h1>Application is Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
</div>
</html>
my css
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}
You need to use this open your polyfill.ts file and find this part of code :
/**
* Required to support Web Animations `#angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera.http://caniuse.com/#feat=web-animation **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
then remove comment before import 'web-animations-js';
and run this command npm install --save web-animations-js
I'm trying to make the smoothState.js plugin work. After clicking on a link that leads from index.html to secondary.html the animation produces a reverse but does not lead to secondary.html, remaining in fact on the same screen.
Here you will find the small example uploaded on codepen:
https://codepen.io/vizzale/project/editor/DPkyBr
here instead the code:
(index.html)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:100vh;background-color:red;z-index:100;"></div>
link page
</section>
<section style="width:100vw;height:20vh;background-color:grey;"></section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(secondary.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:30vh;background-color:red;z-index:100;"></div>
link page
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(JavaScript)
$(function() {
'use strict';
var $page = $('#cover'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
onStart: {
duration: 700, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
(CSS)
* {
margin: 0;
padding: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
color: #000;
background: #fff;
will-change: auto;
overflow-x: hidden;
}
a, a:link, a:hover, a:active, a:visited {
color: #000;
text-decoration: none;
}
#cover {
height: 100vh;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.scene .scene_element {
-webkit-animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.scene .-fadeindown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
Try with class="m-scene" on your container, I don't think this class can be changed.
I answer my own question to inform you guys that the problem does not seem to exist. It is sufficient to emulate the site on a live server (for example Atom Live Server) in order to correctly switch from one page to another.
in this code i'm trying to rotate the icon 180 degree.but it will work as icon rotate 180 degree but the end of the rotation it will face downward direction instead of upward direction.how can i fix this problem?.
my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="troll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<i class="spinner fa fa-caret-down"></i>
</body>
</html>
associated CSS:
.spinner {
-webkit-animation:spin 0.5s linear 1;
-moz-animation:spin 0.5s linear 1;
animation:spin 0.5s linear 1;
}
#keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
}
}
-webkit-keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
}
}
You need to state the fill-mode so that is remains in the last frame, in your code which is the shorthand declaration it would look like this:
.spinner {
-webkit-animation:spin 0.5s linear 1 forwards;
-moz-animation:spin 0.5s linear 1 forwards;
animation:spin 0.5s linear 1 forwards;
}
If you were to declare it independently, the syntax is animation-fill-mode: forwards
I've just started learning html & css and I'm not entirely sure what I'm doing but..
I've added a :hover transition so that when I hover over my header "FIENDS" it fades from #000000 to #800000. Which I've implemented and which works. I've also added the css :active, so that when I click my header "FIENDS" it instantly switches from #800000 to #ffffff. But at the moment it isn't instantly switching, it seems to be using the transition I set up for the :hover and fading to #ffffff. Does anyone have a solution to this?
Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fiends</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Fiends" />
</head>
<body>
<div>
<h1 class="centertext"><fade>FIENDS</fade></h1>
</div>
</body>
<html>
CSS
html {
background-color: #ffffff}
body {
font-family: bebas neue;
text-align: center;}
h1 {
color: #000000;
font-weight: normal;
font-size: 200px;
letter-spacing: 15px;}
h1.centertext {
margin: 225px auto auto auto}
fade {
color: #000000;
-webkit-transition: color .12s linear;
-moz-transition: color .12s linear;
-ms-transition: color .12s linear;
-o-transition: color .12s linear;
transition: color .12s linear;}
fade:hover {
color: #800000;}
fade:active {
color: #ffffff}
You will probably have to use JavaScript to get the full animation effect that you want. You can change the transition property in :active, for example:
fade:active {
transition: none;
color: #fff;
}
http://jsfiddle.net/Rppmd/
However the transition is not overridden when it is no longer active so the element will still fade back in (i.e. the solution is not perfect).
With JavaScript you can remove transition entirely and have JS do all the animations. This will allow you to set the animation timing e.g. on hover. On mousedown and mouseup, no animation would be needed, just color change.