I am making my first website and got stuck. On page load I have animation (elements come down to place) but i also have :hover scale in it. So animation now works, but when I hover it does not scale up. Result I am looking for is on page load elements come down and then when you hover on them they scale up.
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
transition: transform, scale 2s;
transform: translateY(-80px);
animation: come-in 2s;
animation-fill-mode: forwards;
}
top-header h1:hover {
transform: scale(1.05);
}
#keyframes come-in {
to {transform: translateY(0);}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title>Li-designs</title>
<meta name="description" content="Ignas Levinskas is young designer and web developer.">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"?>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:200,400,600,800" rel="stylesheet">
</head>
<body>
<header>
<div class="overlay">
<top-header>
<h1>Ignas Levinskas</h1>
<social-header>
<ul>
<li><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></li>
<li><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></li>
<li><i class="fa fa-behance" style="color:white" aria-hidden="true"> </i></li>
</ul>
</social-header>
</top-header>
<cover-content>
<h1>Welcome</h1>
<img src="images/logo.png" alt="Ignas Levinskas designs logo">
</cover-content>
</div>
</header>
<main>
</main>
</body>
</html>
You've put the rules in the wrong classes.
I've rearranged them like this:
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(1.05);
transition: scale 2s;
animation-fill-mode: forwards;
}
#keyframes come-in {
from {transform: translateY(-80px);}
to {transform: translateY(0);}
}
Any property used in element:hover should be present in element as well so that it can when hovered that property will be changed.
Here is your final working CSS.
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(2);
transform-origin: top left;
}
#keyframes come-in {
from { transform: translateY(-80px) scale(1);}
to {transform: translateY(0) scale(1);}
}
and working example at codepen https://codepen.io/fearless23/pen/QgRMgb
top-header h1 {
animation-fill-mode: forwards;<---------------Remove
transform: translateY(-80px);<---------------Remove
//more code
}
#keyframes come-in {
from { transform: translateY(-80px);} <------------Added
to {transform: translateY(0);}
}
top-header h1 {
text-transform: capitalize;
color:red;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
transition: transform, scale 2s;
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(1.05);
}
#keyframes come-in {
from {transform: translateY(-80px);}
to {transform: translateY(0);}
}
top-header h1:hover {
transform: scale(1.5);
padding-left: 100px;
}
#keyframes come-in {
from { transform: translateY(-80px);}
to {transform: translateY(0);}
}
<header>
<div class="overlay">
<top-header class="x">
<h1>Ignas Levinskas</h1>
<social-header>
<ul>
<li><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></li>
<li><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></li>
<li><i class="fa fa-behance" style="color:white" aria-hidden="true"> </i></li>
</ul>
</social-header>
</top-header>
<cover-content>
<h1>Welcome</h1>
<img src="images/logo.png" alt="Ignas Levinskas designs logo">
</cover-content>
</div>
</header>
<main>
</main>
Related
I've created an animation to cycle through a set of individual FontAwesome icons. It is working on latest Firefox and Chrome, but on IE (10, 11, Edge) the icon simply doesn't change.
To prove that IE is at least trying to animate, I've added the colour CSS.
Is this something that just can't be done on IE with CSS alone?
i::before {
animation: battery 5s infinite;
font-size:2em;
}
#keyframes battery {
0% { content: "\f244"; color:red; }
25% { content: "\f243"; color:green; }
50% { content: "\f242"; color:blue; }
75% { content: "\f241"; color:yellow; }
100% { content: "\f240"; color:purple; }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<i class="fas fa-battery-empty"></i>
As I commented, you can try with stacking icons:
i.fas {
animation: battery 5s infinite;
opacity:0;
color:red;
}
i.fas:nth-child(2) {animation-delay:1s;}
i.fas:nth-child(3) {animation-delay:2s;}
i.fas:nth-child(4) {animation-delay:3s;}
i.fas:nth-child(5) {animation-delay:4s;}
#keyframes battery{
0%,20% { /* 20 = 100 / 5 */
opacity:1;
}
21%,100% {
opacity:0;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<span class="fa-stack fa-4x">
<i class="fas fa-stack-1x fa-battery-empty"></i>
<i class="fas fa-stack-1x fa-battery-quarter"></i>
<i class="fas fa-stack-1x fa-battery-half"></i>
<i class="fas fa-stack-1x fa-battery-three-quarters"></i>
<i class="fas fa-stack-1x fa-battery-full"></i>
</span>
For IE, you may look instead at text-indent and move the icon steps by steps instead updating the content value.
i::after {
animation: battery 10s infinite;
display: inline-block;
width: 0;
text-indent: -1.25em;
content: " \f244 \f243 \f242 \f241 \f240";
white-space: nowrap;
position:relative;
z-index:-1;
}
i {
overflow: hidden;
font-size: 2em;
}
#keyframes battery {/* update values and steps to your needs */
0% {
text-indent: -1.25em;
color: green;
}
19.9999% {
text-indent: -1.25em;
}
20% {
text-indent: -2.75em;
color: green;
}
39.999% {
text-indent: -2.75em;
}
40% {
text-indent: -4em;
}
59.999% {
text-indent: -4em;
color: blue;
}
60% {
text-indent: -5.25em;
}
79.999% {
text-indent:-5.25em;
color: orange;
}
80% , 100%{
text-indent: -6.5em;
color: red;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" crossorigin="anonymous">
<i class="fas fa-battery-empty"></i>
If you're using the SVG sprites with the JS version of font-awesome then the CSS is slightly different.
The font-awesome JS removes the fas class and turns it into a data-prefix property so you'll have to add an identifier to the <span>
.battery svg {
animation: battery 5s infinite;
opacity: 0;
color: red;
}
.battery svg:nth-child(2) {
animation-delay: 1s;
}
.battery svg:nth-child(3) {
animation-delay: 2s;
}
.battery svg:nth-child(4) {
animation-delay: 3s;
}
.battery svg:nth-child(5) {
animation-delay: 4s;
}
#keyframes battery {
0%, 20% { /* 20 = 100 / 5 */
opacity: 1;
}
21%, 100% {
opacity: 0;
}
}
...
<script src="https://pro.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<span class="fa-stack fa-4x battery">
<i class="fas fa-stack-1x fa-battery-empty"></i>
<i class="fas fa-stack-1x fa-battery-quarter"></i>
<i class="fas fa-stack-1x fa-battery-half"></i>
<i class="fas fa-stack-1x fa-battery-three-quarters"></i>
<i class="fas fa-stack-1x fa-battery-full"></i>
</span>
So I have completed some simple code to spin the inside element when you hover on the container.
This works just as I want it when the mouse is hovering over the container but when the mouse is no longer within the container the spin stops.
How can I complete a full spin rotation, initiated by a mouse hover where it will complete a full spin even if the mouse leaves the container, preferably with just CSS.
Current code:
HTML
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(-90deg); }
50%{ transform: rotate(-180deg); }
75% { transform: rotate(-270deg); }
100% { transform: rotate(-360deg); }
}
.logo:hover > .spin{
animation: spin 450ms;
}
.logo{
background: #eee;
width: 100px;
height: 100px;
text-align: center;
line-height: 110px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
<div class="logo">
<i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
</div>
</a>
This should work ! :)
jQuery(document).ready(function(){
jQuery(".logo").hover(function(){
var logo = jQuery(this);
if(!logo.hasClass('hover')){
logo.addClass('hover');
setTimeout(function(){
logo.removeClass('hover');
}, 450);
}
}, function(){});
});
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(-90deg); }
50%{ transform: rotate(-180deg); }
75% { transform: rotate(-270deg); }
100% { transform: rotate(-360deg); }
}
.logo.hover > .spin{
animation: spin 450ms;
}
.logo{
background: #eee;
width: 100px;
height: 100px;
text-align: center;
li
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#">
<div class="logo">
<i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>
</div>
</a>
I have three images in a row. The images don't have text in them. That needs to be added with the code. I used the method described in posts here (using relative and absolute positions) and have it somewhat working. Here is the jsfiddle. There are two main problems.
First, the placement isn't consistent. If the window is resized, the text doesn't move with the image. On a smartphone, the text disappears completely.
Second, when the images are mousedover they expand. But if the mouse is moved over the text, the expanding stops. If I remove the z-index then the text disappears when the image is mousedover. I want to have the text always show but also to expand the image. My code is below. It is taken from the example here, except for the text overlay, which I added. Is it possible to add text to an image that changes and have it work as described?
<style>
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
</style>
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_0">Img 1</div>
<li id="1" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_1">Img 2</div>
<li id="2" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_2">Img 3</div>
</ul>
</div>
The main problem is that the structured your HTML incorrectly - you can't put <div>s in between the <li> elements in the <ul>.
As well as causing the broken layout, its also the reason the mouseover on the text affects the image doesn't work - the text isn't actually inside an nav-item element that has the hover effect.
You can solve all your problems by putting your div's inside the <li> elements!
Bonus Fix :), I've also fixed the space at the bottom under the image - just make the image display:block;.
Your Fiddle, updated with these changes: https://jsfiddle.net/pcpg7zww/2/
Working snippet:
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
display:block; /* this will remove the space at the bottom */
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_0">Img 1</div>
</a>
</li>
<li id="1" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_1">Img 2</div>
</a>
</li>
<li id="2" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_2">Img 3</div>
</a>
</li>
</ul>
</div>
Brand new here and a total novice, so please forgive me for the multiple faux pas I'm committing. I'm trying to make a widget for an iBook, that will have expandable information. Given that the space is limited, trying to use an accordion to do so. Through multiple iterations (some solely CSS, others with CSS+jQuery) I've landed on below, which I'm happy with except can't get the second arrow to rotate correctly. Is it possible using the radio/checked method?
My code is below (Fiddle Link)
CSS:
body {
font-family:’Arial’, sans-serif;
}
.accordion {
margin: 0 auto;
width: 400px;
}
.accordion > label {
display: block;
}
.rotate {
padding:0;
margin:-2px 0 0 0px;
line-height:20px;
width:13px;
position:absolute;
transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.accordion > input {
display: none;
}
.accordion > div {
max-height: 0;
overflow: hidden;
}
.accordion > input:checked + label + div {
max-height: 500px;
}
.accordion > div > * {
margin: 10px;
}
.accordion > input:checked + label {
background-color: rgba(19,14,109,0.21);
}
.accordion > label {
background-color: rgba(19,14,109,0.08);
border: 1px solid gray;
color: black;
cursor: pointer;
font-weight: bold;
padding: 4px 10px;
}
.accordion > div {
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
-webkit-transition: all ease-in-out 1000ms;
-moz-transition: all ease-in-out 1000ms;
-o-transition: all ease-in-out 1000ms;
transition: all ease-in-out 1000ms;
}
input[name='accordion1'] ~ .rotate {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
input[name='accordion1']:checked ~ label .rotate {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
HTML
<div class="accordion">
<input id="acrd1-item1" name="accordion1" type="radio"checked>
<label for="acrd1-item1"><div class="rotate">▶</div>    Common ICU Sedatives</label>
<div>
<p>
<ul type=“circle”>
<li><b>Propofol</b></li>
<ul type=“disc”>
<li>Dosing: 50 - 200mg/hr, 1-3mg/kg/hr</li>
<li>Benefits: Half-life of 30-60 minutes</li>
<li>Adverse effect: Hypotension, bradycardia, hypertriglyceridemia, pancreatitis</li>
</ul>
<li><b>Dexmedetomidine</b></li>
<ul type = “disc”>
<li>Dosing: 0.2 - 1.5 mcg/kg/hr</li>
<li>Benefits: No respiratory suppression</li>
<li>Adverse effects: Transient hypertension, then hypotension and bradycardia</li>
</ul>
<li><b>Midazolam</b></li>
<ul type=“disc”>
<li>Dosing: Bolus, 1-5 mg, 1-5 mg/hr</li>
<li>Benefits: Less hypotension</li>
<li>Adverse effects: Long half-life (3-11 hrs), high risk of delirium and tolerance</li>
</ul>
</ul>
</p>
</div>
<input id="acrd1-item2" name="accordion1" type="radio">
<label for="acrd1-item2"><div class="rotate">▶</div>    Common ICU analgesics</label>
<div><p>
<ul type=“circle”>
<li><b>Fentanyl</b></li>
<ul type=“disc”>
<li>Dosing: 20-100 mcg/hr; consider loading dose of 50 to 100mcg</li>
<li>Adverse Effect: Respiratory depression, hypotension</li>
</ul>
<li><b>Morphine</b></li>
<ul type = “disc”>
<li>Dosing: 1-5mg/hr, consider loading dose 2-5 mg</li>
<li>Adverse Effect: Metabolite renally excreted, known to cause neurotoxicity, respiratory depression, histamine release</li>
</ul>
</ul>
</p></div>
Thanks so much in advance.
You just need to place the second block in a div.accordian like so:
<div class="accordion">
<input id="acrd1-item1" name="accordion1" type="radio"checked>
...
</div>
<div class="accordion">
<input id="acrd1-item2" name="accordion1" type="radio">
...
</div>
After it works like magic.
Here is the updated Fiddle
If you have any more question, don't hesitate to ask.
I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.
On an element which I have rotated, an anchor that spans 100% of the width of the element is only accessible on the right 50% of the element.
This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.
Here is the code:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
Becomes:
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
The addition of the translateZ to the transform makes the left side of the element clickable.
Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/