I am making a project in which there is a text(which is "happy birthday to you") and a heart. At starting, the heart drops and hit the first word, then the second, and so on. When the heart hit the text, it should turn yellow. And when the heart hit the last word, after 1 or 2 seconds the text fades and reappears with the previous color.
I have done with the transform property but messed up with the colors. Please suggest me some solutions.
.main .text{
font-size: 50px;
font-family: cursive;
color: white;
animation: opacity-control 3.5s infinite;
}
.main .text span{
display: inline-block;
animation: text-jump 3.5s ease-in-out infinite, color-change 3.5s infinite;
}
.main .text span:nth-child(1){
animation-delay: 0.25s;
}
.main .text span:nth-child(2){
animation-delay: 0.5s;
}
.main .text span:nth-child(3){
animation-delay: 0.75s;
}
.main .text span:nth-child(4){
animation-delay: 1s;
}
.main .text span:nth-child(5){
animation-delay: 1.25s;
}
#keyframes text-jump{
0%{
transform: translateY(0);
color: yellow;
}
10%{
transform: translateY(20px);
color: yellow;
}
15%{
transform: translateY(0);
color: yellow;
}
100%{
color: yellow;
}
}
#keyframes opacity-control{
0%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes color-change{
0%{
}
40%{
color: yellow;
}
95%{
color: yellow;
}
100%{
color: white;
}
}
You don't need 2 separate animations to change the text color and make it 'jump'.
Combine both of them, remove the 100% step (not needed), and change the 15% step so that it changes the text back to white after it animates.
#keyframes color-jump {
0% {
transform: translateY(0);
color: yellow;
}
10% {
transform: translateY(20px);
color: yellow;
}
15% {
transform: translateY(0);
color: white;
}
}
Change this to only use the one new animation:
.main .text span {
display: inline-block;
animation: color-jump 3.5s ease-in-out infinite;
}
Related
I have the following code:
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 12.5s linear infinite 0s;
-ms-animation: vertical 12.5s linear infinite 0s;
-webkit-animation: vertical 12.5s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5) {
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: rgb(1, 16, 231);
color: white;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalflip"><span>Change</span><span>Text</span></h1>
</section>
I would like the text to be Sample Change and the Change alternates to Text. Right now, the text is not alternating and its on a new line whereas I would like it to be all on one line and the Sample text does not change (remains constant) but there should be a vertical flip word change on the Change and it should alternate between Text. How can I accomplish this?
This is where I got the code from: https://codepen.io/kaceyatstandcreative/pen/PowbpKm
First, there are some errors in your code:
In HTML, you're missing the </div>.
Typo at class="verticalflip" should be verticalFlip as indicated in your css
Multiple color properties in a single css #hero h1 block
After fixing those errors, your animation doesn't appear because the -webkit-text-fill-color: transparent; removes any text color. You should change it into color: transparent; in your case.
Updated:
change text to background image
remove delay between text by remove other span dependencies.
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 4s linear infinite;
-ms-animation: vertical 4s linear infinite;
-webkit-animation: vertical 4s linear infinite;
opacity: 0;
overflow: hidden;
position: absolute;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
background-position: 15% 20%;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
50% {
opacity: 1;
-moz-transform: translateY(0px);
}
70% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
50% {
opacity: 1;
-webkit-transform: translateY(0px);
}
70% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
50% {
opacity: 1;
-ms-transform: translateY(0px);
}
70% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div></h1>
</section>
You had some broken HTML, so I fixed that. Also replaced the spans with div because transform: rotate only works with block elements, not inline elements like span.
I animated, just by spinning the text, and not changing the opacity. I will leave that up to you if you want to add that. I also added a pause where the text isn't animated (looping from 90% to 10% with 0deg rotation).
In order to get all elements on the same row, I added display: flex to your h1, and to make the spinning text to overlay I was forced to use a grid layout, where both children are on row 1 and column 1 (grid-area). I tried position: absolute but background-clip: text didn't work on Firefox when I did that.
I increased the font size in order to show the background-clip in a better way.
[edit] Apparently, Chrome bugs out when using background-clip: text together with backface-visibility: hidden.
Working example: Firefox
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
Working example: Chrome & Safari
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
#hero > h1 {
display: flex;
margin: 0;
margin-bottom: 16px;
font-size: 78px;
font-weight: 700;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
#hero div {
/* Chrome somehow "looses" the background when animating it */
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
-webkit-background-clip: text;
}
.verticalflip {
display: grid;
}
.verticalflip > div {
--animation-duration: 6s;
grid-area: 1 / 1;
animation: vertical var(--animation-duration) linear infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.verticalflip > div:nth-child(1) {
animation-delay: calc(-0.5 * var(--animation-duration));
}
#keyframes vertical {
10% { transform: rotateX(0deg); }
40% { transform: rotateX(180deg); }
60% { transform: rotateX(180deg); }
90% { transform: rotateX(0deg); }
}
<section id="hero">
<h1 style="">
<div>Sample </div>
<div class="verticalflip">
<div>Change</div>
<div>Text</div>
</div>
</h1>
</section>
I have 3 animations on css what I've made in fiddle that are "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate) which is want to running by toggle onClick on an Element of "<h1>". untiil now of my achievements is just only till running to animate2 only after that I don't know how ? Please to anyone for solve this case and sorry for my bad english ...
demo on fiddle
function Animation() {
var anim = document.getElementsByTagName("h1")[0];
anim.innerText = "|"; anim.className = "animate1";
anim.addEventListener("webkitAnimationEnd", function() {anim.className = 'animate2'});
anim.addEventListener("animationend", function() {anim.className = 'animate2'});
}
#keyframes twister1 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes twister2 {
0% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(360deg);
}
20% {
transform: rotateZ(720deg);
}
30% {
transform: rotateZ(1080deg);
}
40% {
transform: rotateZ(1440deg);
}
50% {
transform: rotateZ(1800deg);
}
60% {
transform: rotateZ(2160deg);
}
70% {
transform: rotateZ(2520deg);
}
80% {
}
90% {
}
100% {
}
}
#keyframes twister3 {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.animate1 {
-webkit-animation: twister1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate2 {
-webkit-animation: twister2;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate3 {
-webkit-animation: twister3;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>
Use only one animation and simply increase/decrease the duration to control the speed:
var i = 7;
var anim = document.getElementsByTagName("h1")[0];
function Animation() {
anim.className = "animate";
anim.style.animationDuration = (i-=2) + 's';
if(i<=0) {
i=7;
}
}
#keyframes twister {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.animate {
animation: twister 5s infinite linear;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>
I have made an animation which on hover must be like the image below;1
But instead it always align like this;2
I want to align all the in a straight line when animation is paused on hover on . But it did not happen.I tried to use animation-fill-mode:forwards; but it did not worked.All the <div id="circle"> must be align in a straight line such that it resembles a straight block of sevral colors just like my first pictures which was my expectation. It occurs sometime only but not every time. I want it to occur every time as i hover the <div>. You can use javascript too. but this animation must work and all <div> must align in a straight line.
.circle-container{
height:100px;
display:flex;
position:absolute;
width:fit-content;
overflow:hidden;
align-items:center;
justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
border-radius:45%;
}
#circle{
align-items:center;
justify-content:center;
color:white;
display:flex;
height:55px;
width:55px;
}
.circle5{
background:#FF6347;
animation:bubbling5 1s infinite;
animation-direction:alternate;
}
.circle4{
background:#4682B4;
animation:bubbling4 1s infinite;
animation-direction:alternate;
}
.circle3{
background:#D2B48C;
animation:bubbling3 1s infinite;
animation-direction:alternate;
}
.circle2{
background:#008080;
animation:bubbling2 1s infinite;
animation-direction:alternate;
}
.circle1{
background:#D8BFD8;
animation:bubbling1 1s infinite;
animation-direction:alternate;
}
#keyframes bubbling1 {
0% {
transform: translateY(0px) translateX(22px);
}
50% {
transform: translateY(-10px) translateX(22px);
}
75% {
transform: translateY(10px) translateX(22px);
}
100% {
transform: translateY(0px) translateX(22px);
}
}
#keyframes bubbling2 {
0% {
transform: translateY(0px) translateX(12px);
}
45% {
transform: translateY(-10px) translateX(12px);
}
70% {
transform: translateY(10px) translateX(12px);
}
100% {
transform: translateY(0px) translateX(12px);
}
}
#keyframes bubbling3 {
0% {
transform: translateY(0px) translateX(2px);
}
40% {
transform: translateY(-10px) translateX(2px);
}
65% {
transform: translateY(10px) translateX(2px);
}
100% {
transform: translateY(0px) translateX(2px);
}
}
#keyframes bubbling4 {
0% {
transform: translateY(0px) translateX(-8px);
}
35% {
transform: translateY(-10px) translateX(-8px);
}
60% {
transform: translateY(10px) translateX(-8px);
}
100% {
transform: translateY(0px) translateX(-8px);
}
}
#keyframes bubbling5 {
0% {
transform: translateY(0px) translateX(-18px);
}
30% {
transform: translateY(-10px) translateX(-18px);
}
55% {
transform: translateY(10px) translateX(-18px);
}
100% {
transform: translateY(0px) translateX(-18px);
}
}
.circle-container:hover {
position:absolute;
}
.circle-container:hover .circle5 {
border-radius:0% 30% 30% 0%;
animation-play-state:paused;
transition: all 0.2s;
}
.circle-container:hover .circle4 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.4s;
}
.circle-container:hover .circle3 {
border-radius:0%;
animation-play-state:paused;
transition: all 0.6s;
}
.circle-container:hover .circle2 {
border-radius:0%;
transition: all 0.8s;
animation-play-state:paused;
}
.circle-container:hover .circle1 {
border-radius:30% 0% 0% 30%;
transition: all 1s;
animation-play-state:paused;
}
.circle-container:hover .c-title {
display:none;
}
<div class="circle-container">
<div id="circle" class="circle1"><h1 class="c-title">E</h1></div>
<div id="circle" class="circle2"><h1 class="c-title">M</h1></div>
<div id="circle" class="circle3"><h1 class="c-title">A</h1></div>
<div id="circle" class="circle4"><h1 class="c-title">I</h1></div>
<div id="circle" class="circle5"><h1 class="c-title">L</h1></div>
</div>
Looks like someone produced a ton of unnecessary code =))
Regarding your question, you have to remove the animation at all, not pause it.
See the snippet below.
.circle-container {
height: 100px;
display: flex;
position: absolute;
width: fit-content;
overflow: hidden;
align-items: center;
justify-content: center;
}
.circle-container div {
display: inline-block;
height: 55px;
width: 55px;
margin-right: -10px;
border-radius: 45%;
color: white;
font:900 2em/55px serif;
text-align: center;
animation: bubbling 1s infinite alternate;
transition: all .2s;
}
.circle-container div:nth-child(1) {
background: #D8BFD8;
}
.circle-container div:nth-child(2) {
background: #008080;
animation-delay: .1s;
}
.circle-container div:nth-child(3) {
background: #D2B48C;
animation-delay: .2s;
}
.circle-container div:nth-child(4) {
background: #4682B4;
animation-delay: .3s;
}
.circle-container div:nth-child(5) {
background: #FF6347;
margin: 0;
animation-delay: .4s;
}
#keyframes bubbling {
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
}
.circle-container:hover div {
border-radius: 0;
color: transparent;
transform: translateY(0);
animation: none;
}
.circle-container:hover div:last-child {
border-radius: 0 30% 30% 0;
}
.circle-container:hover div:first-child {
border-radius: 30% 0 0 30%;
}
<div class="circle-container">
<div>E</div>
<div>M</div>
<div>A</div>
<div>I</div>
<div>L</div>
</div>
I created a landing page where an image will fade on into the screen, then a user can press the arrow, and it will bring them to a different page with more content.
What my goal is, is to get it so that when the user presses the button, the new page slides in to view.
I found an example of what I wanted here: https://tympanus.net/Development/PageTransitions/
I would like to use the "Move to left / from right" transition.... I tried downloading the source file from this website and figuring out how to implement their code into mine, but I was really confused... Does anyone have any suggestions as to how to get this transition to work? I would like to keep it strictly HTML/CS/Java/JQ....
Thanks
* {
margin: 0;
padding: 0;
}
.fade-in {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames {
0% {
opacity: 0;
transform: translate(0px, -25px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
opacity: 0;
-moz-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
opacity: 0;
-o-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-ms-transform: translate(0px, 0px);
}
}
#showcase {
background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
#showcase h1 {
font-size: 6vw;
color: #fff;
font-family: passion one;
letter-spacing: 4vw;
margin-left: 4vw;
text-shadow: 2px 2px 3px #000;
}
#showcase h2 {
font-size: 2.5vw;
line-height: 2vw;
color: #fff;
font-family: passion one;
text-shadow: 2px 2px 3px #000;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 100px;
background-color: darkgreen;
text-shadow: 2px 2px 3px #000;
}
#showcase .button:hover {
background-color: green;
color: #fff;
}
.hiddendiv {
display: none;
width: 300px;
height: 300px;
background-color: green;
}
.button:focus+.hiddendiv {
display: block;
margin-left: 100px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<div id="background">
<h1>TITLE</h1>
</div>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>
I implemented something similar using this jQuery plugin...
http://joaopereirawd.github.io/animatedModal.js/
As you can see in the plugin documentation, you can have your new window content already created and when you click the arrow button, the plugin will make it appear using the animation you selected.
In my case I need the new window content to be generated dinamically the button is pressed, so I create a click event in that button that generates all the new window content inside of a div (and a new link that will be responsible of really triggering the animated modal), and append all to the DOM. Then I create the animatedModal element associated to the generated div, and trigger the click event in the new link with the click() function.
For your case (include the css and javascript files following the following the plugin documentation)...
HTML:
<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
<div id="newwindow">
<!-- IMPORTANT. Create the element to close the window!!! -->
<button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>
<div class="yournewwindowcontent">
<!-- Put your new window content here-->
</div>
</div>
JQUERY:
$("#linktonewwindow").animatedModal({
modalTarget:'newwindow',
animatedIn:'bounceInLeft', // Choose the animations you prefer
animatedOut:'bounceOutLeft',
color:'#999999', // Background color of the new window
beforeOpen: function() {
},
afterOpen: function() {
},
beforeClose: function() {
},
afterClose: function() {
}
});
I hope it helps
http://www.samnorris.co.nz
In the About section under 'Proficiencies' I have a "Skills Progression Bar" list made with CSS, which is supposed to animate using keyframes - but the animation cannot be seen on my page presumably because it is running as soon as the page loads.
Is there any way to delay or trigger the keyframe animations only when the 'Proficiencies' heading/slide is clicked, or alternatively only when the container with the skills bar is visible in the viewport?
I am aware of the various techniques to only run an animation when the page is scrolled to a certain point, but in this instance obviously that's not quite what I want...
Relevant code (for Krish):
CSS
.about-skills {
width:398px;
margin:0;
position:relative;
float:left;
font-size:12px;
line-height:2em;
padding:30px 0 30px;
margin-left: 15px;
}
.skills-col { width:400px; }
.skills-list {
display: none;
list-style:none;
padding-top:20px;
}
.skills-list li {
margin-bottom:50px;
background:#ececec;
height:5px;
border-radius:3px;
border-left:1px solid #cecece;
border-top:1px solid #cecece;
border-right:1px solid #cecece;
border-bottom:1px solid #b5b5b5;
}
.skills-list li em {
position:relative;
top:-30px;
}
.skills-expand {
height:1px;
margin:2px 0;
background:#0dc9ff;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}
.html5 { display: block; width:85%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { display: block; width:70%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { display: block; width:50%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.php { display: block; width:20%; -moz-animation:php 2s ease-out; -webkit-animation:php 2s ease-out; }
.dreamweaver { display: block; width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.photoshop { display: block; width:100%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.responsive { display: block; width:40%; -moz-animation:responsive 2s ease-out; -webkit-animation:responsive 2s ease-out; }
#-moz-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-moz-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-moz-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-moz-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
#-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-webkit-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
jQuery
$('a.proficiencies').click(function(){
$('.skills-list').toggleClass('html5');
});
after look at your code it will work good with the jquery addClass on the click of a link
HTML Structure
<a class="proficiencies">Proficiencies(click)</a>
<ul>
<li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
<li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
</ul>
jQuery
$('a.proficiencies').click(function(){
$('.html5anim').addClass('html5');
$('.css3anim').addClass('css3');
});
Live Demo : http://codepen.io/krish4u/pen/fyehA