Recently, I've been building a website for a keyboard-enthusiast business. On the home page, I have category buttons that animate when hovered. However, it abruptly ends once the mouse cursor is no longer on it. To combat this problem, I decided to use the psuedo-elements: :hover::after. I created a new animation called afterbuttonslide with the following code and assigned it to the psuedo-element like this:
#keyframes afterbuttonhoverslide {
0% {
padding: 0 25 0 0;
}
100% {
padding: 0;
}
}
.homepagecategories:hover::after {
animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
animation-fill-mode: forwards;
}
This however doesn't execute the animation as intended. After reading other Stack Overflow answers such as Deepak Yadev's and an article from GeeksforGeeks, I tried adding content: ""; and temporaily removing my psuedo-element :hover with underwhelming results. Perhaps the psuedo-element :after is simply ineffective on anything but anchors? I'm willing to take any answer that can provide me with the same result I intended before.
Rest of my code:
<head>
<title>HotDogKeyboards</title>
<link rel="icon" href="https://drive.google.com/uc?export=download&id=1Ka7ylovILyZSEcIUTituT9f_uzFdKfCl">
</head>
<body style="margin: 0; padding: 0; background-color: #2e3440;">
<!-- This style element is temporary to display CSS on the same script as my HTMl code. -->
<style>
/* Imported Fonts */
#font-face {
font-family: Roboto;
src: url(https://drive.google.com/uc?export=download&id=1PopP9idetRz1ULFNGXyP6kraMyV4bt5F);
}
#font-face {
font-family: Poppins;
src: url(https://drive.google.com/uc?export=download&id=16AyE8WbBCW13Z-Ixbmctio3TKuajAhwt);
}
#font-face {
font-family: indie-flower;
src: url(https://drive.google.com/uc?export=download&id=1NosWGJF7-PsfwCHZI_es8anZhO_bz8wu);
}
#font-face {
font-family: red-seven;
src: url(https://drive.google.com/uc?export=download&id=1Xs4IIqDBGc_lCYFBLeC6DPhohsJPBeTp);
}
#font-face {
font-family: good-times;
src: url(https://drive.google.com/uc?export=download&id=1nj8_G-SMT-2Bqh8kVdRJ0w7D8DXzmomC);
}
/* Property specific classes*/
h1.temporarywait {
font-family: Roboto;
}
p.temporarywait {
font-family: Poppins;
}
img.mainicon {
width: 13%;
}
a.headerbuttons {
padding: 10px 15px 10px 15px;
font-size: 27px;
font-family: indie-flower;
text-decoration: none;
color: black;
}
a:visited.headerbuttons {
color: black;
}
a:active.headerbuttons {
color: white;
background-color: #FFFF9F;
margin: 0;
}
a:hover.headerbuttons {
background-color: #FFF017;
color: white;
}
a:hover.button {
background-color: #EFCC00;
}
a:visited.button {
color: black;
}
p.categorytop {
font-family: good-times;
color: white;
font-size: 3vw;
text-align: center;
}
/* Classes */
.header {
background-color: #EAAA00;
padding: 25px;
margin: 0;
position: fixed;
z-index: 99;
width: 100%;
/*TEMPORARY, REMOVE WHEN NECESSARY*/
opacity: 0%;
}
.headerbuttons {
display: inline-block;
padding: 2.5px 4px 2.5px 4px;
margin: 0;
}
.headerlinkwrapper {
background-color: #EFCC00;
width: 100%;
position: fixed;
margin: 0 0 0 -25;
z-index: 99;
}
.featuredproducttext {
position: absolute;
top: 50%;
left: 30px;
color: white;
font-family: red-seven;
font-size: 2.2vw;
}
.featuredproductbutton {
position: absolute;
top: 75%;
left: 30px;
}
.button {
background-color:#EAAA00;
text-align: center;
text-decoration: none;
padding: 1.5vw 2vw;
font-size: 2vw;
font-family: Poppins;
color: black;
}
.featuredproductinfo {
position: absolute;
top: 60%;
left: 30px;
color: white;
font-size: 1.3vw;
font-family: red-seven;
}
.categorytop {
padding: 0.5em 0 0.5em 0;
background-color: #434c5e;
margin: 4px 0 0 0;
}
.categorytext {
color: #e5e9f0;
font-family: good-times;
font-size: 1.7vw;
position: absolute;
top: 23%;
left: 5px;
}
/*Class Animations*/
.featuredproducttext {
animation: 1.7s ease-out 0s 1 slidein;
}
.featuredproductinfo {
animation: 1s ease-out 0s 1 slidein;
animation-fill-mode: both;
animation-delay: 1.7s;
}
.featuredproductbutton {
animation: 1.5s ease-out 0s 1 slideappearance;
animation-fill-mode: both;
animation-delay: 2.9s;
}
.headershowanimation {
animation: 1s ease-out 0s 1 headershow;
}
.headerhideanimation {
animation: 1s ease-out 0s 1 headershow;
}
.homepagecategories {
width: 20%;
height: 17.6vw;
transform: skew(-20deg);
display: inline-block;
margin: -5;
overflow: hidden;
}
/*Homepage Category Images*/
.category1 {
background-image: url("https://drive.google.com/uc?export=download&id=1EmJgZ15Se4XmJUSD4asHA2fu-vhYphvx");
}
.category2 {
background-image: url("https://drive.google.com/uc?export=download&id=1iyEtTFXeYrKK-shG16nixjcX7W54vqv1");
}
.category3 {
background-image: url("https://drive.google.com/uc?export=download&id=1iPUbZjhhx7Nu_8tPoRniJGjPcj6zJAI6");
}
.category4 {
background-image: url("https://drive.google.com/uc?export=download&id=1LAIxyXDgEhromN7v5loednVbX97UtlIB");
}
.category5 {
background-image: url("https://drive.google.com/uc?export=download&id=1Yxm4BQx36QbMNrq4Wox7ox5gR0u0yjfu");
}
/*End of Category Images*/
.homepagecategorycontainer {
overflow: hidden;
background-color: #333333;
position: relative;
}
.homepagecategorycontent {
transform: skew(20deg);
background-repeat: no-repeat;
background-size: cover;
width: 33vw;
height: 33vw;
position: absolute;
}
.homepagecategories:hover::after {
animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover {
animation: 0.5s ease-out 0s 1 buttonhoverslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover .homepagecategorycontent {
animation: 0.5s ease-out 0s 1 buttonimageslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover .categorytext {
animation: 0.7s ease-out 0s 1 slightright;
animation-fill-mode: forwards;
}
/* IDs */
#featuredproduct {
position: relative;
text-align: center;
}
/*Animations*/
#keyframes slidein {
0% {
transform: translateX(-100%);
opacity: 0%;
}
100% {
transform: translateX(-20);
opacity: 100%;
}
}
#keyframes slideappearance {
0% {
opacity: 0%;
top: 77%;
}
100%{
opacity: 100%;
top: 75%;
}
}
#keyframes headerhide {
0% {
top: 120px;
}
100% {
top: -100%
}
}
#keyframes headershow {
0% {
top: -100%;
}
100%{
top: 120px;
}
}
#keyframes buttonhoverslide {
0% {
padding: 0;
}
100% {
padding: 0 25 0 0;
}
}
#keyframes buttonimageslide {
0% {
background-position: 0 0;
}
100% {
background-position: -30 0;
}
}
#keyframes afterbuttonhoverslide {
0% {
padding: 0 25 0 0;
}
100% {
padding: 0;
}
}
#keyframes floatandappear {
0% {
opacity: 0%;
}
100% {
opacity: 100;
transform: translateX();
}
}
#keyframes slightright {
0% {
top: 23%;
left: 5px;
}
100% {
top: 23%;
left: 10px;
}
}
</style>
<!-- Fixed Header -->
<header>
<div class="header" id="header">
<div>
<center>
<img class="mainicon" src="https://drive.google.com/uc?export=download&id=1blJIRZ7SCMqXqTPJ0REXchspxgWJ5k7t">
</center>
</div>
<center>
<div class="headerlinkwrapper">
<div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div>
<div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div><div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div>
</div>
</center>
</div>
</div>
</header>
<!--Featured Product Header -->
<div id="toppage">
</div>
<!-- Featured Product Section -->
<div id="featuredproduct">
<img src="https://drive.google.com/uc?export=download&id=1_b_5r5jFu92jUrou8p9Y4GgTfaABG2Jq" width="100%">
<!-- Product Name -->
<div class="featuredproducttext">
Placeholder Keyboard
</div>
<!-- Brief Product Info -->
<div class="featuredproductinfo">
Awesome, and even more awesome.
</div>
<div class="featuredproductbutton">
Learn More
</div>
</div>
</div>
<!-- Categories -->
<div class="categorytop">
<p class="categorytop">Categories</p>
</div>
<center>
<div class="homepagecategorycontainer">
<a href="#">
<div class="homepagecategories">
<div class="homepagecategorycontent category1">
</div>
<div class="categorytext">
Switches
</div>
</div>
</a>
<a href="#1">
<div class="homepagecategories">
<div class="homepagecategorycontent category2">
</div>
<div class="categorytext">
Keycaps
</div>
</div>
</a>
<a href="#2">
<div class="homepagecategories">
<div class="homepagecategorycontent category3">
</div>
<div class="categorytext">
Keyboards
</div>
</div>
</a>
<a href="#3">
<div class="homepagecategories">
<div class="homepagecategorycontent category4">
</div>
<div class="categorytext">
Group Buy
</div>
</div>
</a>
<a href="#4">
<div class="homepagecategories">
<div class="homepagecategorycontent category5">
</div>
<div class="categorytext">
Misc.
</div>
</div>
</a>
</div>
</center>
</body>
You can use :hover css event on elements. ::after is not what you need.
You don't need an animation to do this.. you can set transition: xx to your button (not :hover) and when the button is hovered you can change the padding or resize it.
And remember that padding: 0 25 0 0; is not correct, you have to specify 25 what. For example 25px.
Here an example:
button {
transition: all .2s linear;
}
button:hover {
padding: 0 25px 0 0;
}
<button>Hello</button>
Related
I am trying to make it so when I open the page, test will show up as red and the testing will show up as white. There is a delay that I am using for when the page opens that I want to keep (if you run the program you will see).
Css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Do you mean like this? See changes under /* added CSS */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
#keyframes text_reveal_red {
100% {
color: crimson;
}
}
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Hello I am fairly new to styling and have seen related questions but have not been able to extract my own solution from their answers. I am hoping someone can clue me into why this carousel works as intended on Chrome and Edge but not Firefox. I have tried duplicating nearly all the CSS declarations with -moz prefix without any noticeable impact.
Less importantly, I was only able to animate the nav buttons by targeting their IDs. Originally targeting their class,n-th child had no effect,
This fiddle demonstrates the undesired behavior: https://jsfiddle.net/gharyiey/8h1tLxgo/42/
If you apply color to the "carousel_snapper" div, you can see that it actually is getting animated, but the adjacent div containing the img is not.
Any help is greatly appreciated...
CSS
#keyframes indicate {
0%, 70% {
background-color: #fff;
}
70%, 100% {
background-color: #333;
}
}
#keyframes tonext {
75% {
left: 0%;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0%;
}
}
#keyframes tostart {
75% {
left: 0%;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0%;
}
}
#keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
* {
box-sizing: border-box;
scrollbar-color: transparent transparent; /*thumb and track color*/
scrollbar-width: 0px;
}
*::-webkit-scrollbar {
width: 0;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
.carousel > ol, li {
list-style: none;
margin: 0;
padding: 0;
}
.carousel {
position: relative;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
.carousel__viewport {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
}
.carousel__slide::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -40%, 70px);
color: #fff;
font-size: 2em;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
/*background-color: greenyellow; <-- UNCOMMENT TO SEE ANIMATED DIV*/
}
#media (hover: hover) {
.carousel__snapper {
animation-name: snap, tonext;
animation-timing-function: ease;
animation-duration: 4100ms;
animation-iteration-count: infinite;
}
#nav1 {
animation: indicate 12300ms infinite -1000ms;
}
#nav2 {
animation: indicate 12300ms infinite 3100ms;
}
#nav3 {
animation: indicate 12300ms infinite 7200ms;
}
.carousel__slide:last-child .carousel__snapper {
animation-name: tostart, snap;
}
}
.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
animation-play-state: paused;
}
.carousel:hover #nav1,
.carousel:focus-within #nav1 {
animation-play-state: paused;
}
.carousel:hover #nav2,
.carousel:focus-within #nav2 {
animation-play-state: paused;
}
.carousel:hover #nav3,
.carousel:focus-within #nav3 {
animation-play-state: paused;
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
display: inline-block;
}
.carousel__navigation-button {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #333;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
transition: transform 0.1s;
}
.dummy_img {
height:290px;
width:640px;
display: block;
margin-left: auto;
margin-right: auto;
}
.img_text {
text-align: center;
vertical-align: middle;
line-height: 290px;
}
HTML
<h1 style="text-align:center">PURE CSS/HTML CAROUSEL WITH ANIMATED NAV</h1>
<section class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
<li id="carousel__slide1" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<div class="dummy_img">
<h1 class="img_text">IMAGE 1</h1>
<!--<a href="">
<img src="img1.jpg" alt="alt_tag_1">
</a>-->
</div>
</li>
<li id="carousel__slide2" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<div class="dummy_img">
<h1 class="img_text">IMAGE 2</h1>
<!--<a href="">
<img src="img2.jpg" alt="alt_tag_2">
</a>-->
</div>
</li>
<li id="carousel__slide3" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<div class="dummy_img">
<h1 class="img_text">IMAGE 3</h1>
<!--<a href="">
<img src="img3.jpg" alt="alt_tag_3">
</a>-->
</div>
</li>
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
<li class="carousel__navigation-item">
Go to slide 1
</li>
<li class="carousel__navigation-item">
Go to slide 2
</li>
<li class="carousel__navigation-item">
Go to slide 3
</li>
</ol>
</aside>
</section>
Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>
So I have just started to learn HTML/CSS and I am trying to create a website for a magazine I'm putting together. However, when I try adding two links to two different pieces of text, one is only partially clickable and the one below is not.
I am thinking it has something to do with my wrapper or the photos I have right beside the text because when I align them more right, they're now clickable. Seems to be like something is blocking part of the word (link) to be clicked on.
I have tried making a sidebar instead but I still get the same result. I tried moving my code around for different results, but still cannot figure it out.
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
.slider is overlapping the links since you're using a negative margin to move the links back up on the page.
A simple fix is to give the links a z-index by assigning position: relative
.ATA, .B {
position: relative;
}
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
I'm making my portfolio and I thought it would be cool when you could see some nice animations when the page loads. only I don't know how to get the animations working. My idea was to make all the classes fade and easeIn slightly after each other so you would get a cool animation sequince when you have loaded the page.
My idea was:
Fade in the title_text in as the first one from left to right.
after that al the programming languages start fading in and ease in to the right from "javascript" to "php" to "mysql" to "css" and finaly "html".
I would like to make it flexible so that I can add more languages once I have learned them.
I'd like to learn from it myself so that I can make my own animations in the future.
for those interested this is my portfolio
image
thanks in advance!
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
CSS
span.mycalendar {
font-size: 0.38em;
line-height: initial;
font-family: arial;
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
margin: 0 auto;
border-radius: 0.6em;
border-style: solid;
border-width: 1px;
border-color: #CFAF3B;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0deg) skewY(0deg);
-webkit-transform-origin: 50% 10%;
transform-origin: 50% 10%;
}
title_text {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
color: white;
z-index: 5;
margin-top: -420px;
font-size: 80px;
text-transform: uppercase;
font-family: league-gothic;
letter-spacing: 5px;
border: 10px solid white;
}
.animations .html {
font-family: league-gothic;
float: left;
margin-left: 200px;
top: 30px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
animation: 5s linear 2s infinite alternate;
}
.animations .css {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: 100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .php {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: -270px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .javascript {
font-family: league-gothic;
float: left;
top: -330px;
margin-left: -100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .mysql {
font-family: league-gothic;
float: right;
margin-right: -500px;
top: -150px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
li {
background-color: red;
text-align: center;
}
li > a {
display: inline-block;
vertical-align: middle;
background-color: blue;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
vertical-align: middle;
}
span.mycalendar * {
display: block;
width: 100%;
font-size: 2.4em;
font-weight: bold;
font-style: normal;
text-align: center;
}
span.mycalendar strong {
position: absolute;
top: 0;
font-weight: normal;
padding-top: 0.06em;
color: #fff;
background-color: #CFAF3B;
box-shadow: 0 2px 0 #CFAF3B;
}
span.mycalendar span {
width: 100%;
font-size: 3.7em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #2f2f2f;
}
ul {
list-style: none;
}
I've scaled it down a bit for the demo but I hope you get the idea
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
opacity: 0;
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
#-webkit-keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
Or make other weird and wonderful animations
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
transform: scale(0,0);
animation-name: pop-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
#keyframes pop-in {
from {
transform: scale(0,0);
}
to {
transform: scale(1,1);
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>