I'm a little new to CSS animations, to apologies if this is a silly question :) I have the following HTML:
<div class="slideToView" rel="{{product}}">
<div class="info" rel="{{product}}">
Info
</div>
<div class="remove" rel="{{product}}">
Remove
</div>
<div style="clear:both"></div>
</div>
...and the following CSS:
/* slider option */
.slideToView {
z-index: 1000000;
background: green;
position: absolute;
right: -200px;
top: 0px;
width: 200px;
}
.slideToView.visible {
transition: 1.5s;
right: 5px;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 1.5s;
animation: slide 0.5s forwards;
animation-delay: 1.5s;
}
.slideToView.dohide {
transition: 1s;
right: -200px;
-webkit-animation: slide 0.5s backwards;
-webkit-animation-delay: 1s;
animation: slide 0.5s backwards;
animation-delay: 1s;
}
.slideToView .info {
float: left;
width: 50%;
background: #b0b6bb;
line-height: 100px;
color: white;
text-align: center;
font-weight: bold;
border-left: 1px solid #95ACBF;
box-sizing: border-box;
}
.slideToView .remove {
float: left;
width: 50%;
background: #ff0000;
line-height: 100px;
color: white;
text-align: center;
font-weight: bold;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
/* end slider options */
If I run the code in Firefox, it works fine:
However, in Chrome it slides out ok - but then it goes to the left of the page:
As I said, I'm quite new to using CSS animations - but AFAIK I have everything right.
You can see a basic example of this happening here:
https://jsfiddle.net/unbmajwv/3/
Thanks for your time!
Add dohide class to slideToView in the html. And add opacity: 0 to the .slideToView class and opacity: 1 to the .slideToView.visible class.
Updated the fiddle: https://jsfiddle.net/unbmajwv/4/
Related
I am trying to typewrite 2 lines in CSS. My problem is that both lines are being written at the same time. I tried to use the animation-delay property but it does not work properly.
How can I type out the first line then type out the second line?
/*-----------------------LINE 1-----------------------*/
.line-1{
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter{
from{width: 0;}
to{width: 9.5em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
animation-delay: 4s;
}
#keyframes typewriter{
from{width: 0;}
to{width: 15em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
/*-----------------------LINE 1-----------------------*/
.line-1, .line-2 {
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter1 4s steps(44) 1s 1 normal both,
blinkTextCursor1 500ms steps(44) infinite normal;
}
#keyframes typewriter1 {
from {
width: 0;
}
to{
width: 9.5em;
}
}
#keyframes blinkTextCursor1 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter2 4s steps(44) 1s 1 normal both,
blinkTextCursor2 500ms steps(44) infinite normal;
animation-delay: 5s;
}
#keyframes typewriter2 {
from {
width: 0;
}
to {
width: 15em;
}
}
#keyframes blinkTextCursor2 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
I guess this is what you're looking for. My guess is that you defined 2 animatations with the same name and therefor you overwrite them. Also you needed to specify properties from .line-1 to .line-2
I am making a simple animation in Codepen - the poem fades in, then the word (that is also the button) fades in. The user clicks on the word and it changes to the next part of the poem.
My problem is that the poem and single word with flash before the fade out starts.
I have tried ALL the tricks I can find, adding:
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
and none of them have worked.
Link to the codepen: https://codepen.io/zaenaria/pen/xWVLmP
$(".btnQuestion").hide();
var answer = document.getElementById('answerBtn');
answer.style.cursor = 'pointer';
answer.onclick = function() {
$(".poem").addClass("animationComplete");
$(".btnAnswer").addClass("animationComplete");
$(".answer").addClass("animationFade");
$(".btnQuestion").show();
$(".btnQuestion").addClass("animationFade");
};
var question = document.getElementById('questionBtn');
question.style.cursor = "pointer";
question.onclick = function() {
$(".answer").addClass("animationComplete");
$(".btnQuestion").addClass("animationComplete");
$(".question").addClass("animationFade");
$(".rip").addClass("animationRIP");
};
body {
background: url("http://res.cloudinary.com/zaenaria/image/upload/v1521062114/paper_texture.jpg");
background-repeat: no-repeat;
background-position: cover;
color: white;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
}
.poem {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 300px;
width: 900px;
position: absolute;
margin: -150px 0 0 -450px;
opacity: 0;
animation-name: fade;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.answer {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
height: 160px;
width: 900px;
position: absolute;
margin: -80px 0 0 -450px;
opacity: 0;
}
.question {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
height: 80px;
width: 400px;
position: absolute;
margin: -40px 0 0 -200px;
opacity: 0;
}
.rip {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 140px;
width: 400px;
position: absolute;
margin: 25px 0 0 -200px;
opacity: 0;
}
.btnAnswer{
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: 200px 0 0 -100px;
opacity: 0;
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.btnAnswer:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion:hover {
background: #f7f7f7;
color: black;
}
.btnQuestion {
font-size: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: center;
height: 80px;
width: 180px;
position: absoulte;
margin: -150px 0 0 -90px;
opacity: 0;
}
#keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes complete {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animationFade {
animation-name: fade;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.animationRIP {
animation-name: fade;
animation-delay: 4.0s;
animation-duration: 1.0s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="poem">Oh me! Oh life! of the questions of these recurring, </br>
Of the endless trains of the faithless, of cities fill’d with the foolish, </br>
Of myself forever reproaching myself, (for who more foolish than I, and who more faithless?) </br>
Of eyes that vainly crave the light, of the objects mean, of the struggle ever renew’d, </br>
Of the poor results of all, of the plodding and sordid crowds I see around me, </br>
Of the empty and useless years of the rest, with the rest me intertwined, </br>
The question, O me! so sad, recurring—What good amid these, O me, O life?</div>
<div class="answer">
That you are here—that life exists and identity, </br>
That the powerful play goes on, and you may contribute a verse.</br>
~Walt Whitman
</div>
<div class="question">What will your verse be?
</div>
<div class="rip">R.I.P Robin Williams</br>
1951-2014</div>
<div class="btnAnswer" id="answerBtn">Answer.</div>
<div class="btnQuestion" id="questionBtn">Question.</div>
</div>
</body>
Try changing the animation start delay to 0 in the css:
.animationComplete {
animation-name: complete;
animation-delay: 0s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
I changed the animation-fil-mode of .animationComplete to backwards and it did the trick :)
.animationComplete {
animation-name: complete;
animation-delay: 0.3s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.
I have a set of icons that transition from the center of the page to a set point, and then remain there. What I want to do is set them to transition to have a thicker border and scale to 130x130px whenever I mouse over one of them, but only the initial animation occurs
CSS:
.iconborder {
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
}
.iconborder:hover {animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;}
#keyframes icongrow {
0% {
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
}
}
#FTPSlideOut
{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;
animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes FTPSlideOut {
0% {
transform: translate(0px, 0px);
visibility: visible;
}
100% {
transform: translate(-300px, -150px);
visibility: visible;
}
}
And HTML:
<body style="background-color:#D4D4D4;height:100%;width:100%">
<img id="SlideUp" class="dropshadow" src="picCenterDotFinalwText.png">
<img id="FTPSlideOut" class="dropshadow iconborder" src="FTP.png">
<img id="PicturesSlideOut" class="dropshadow iconborder" src="Pictures.png">
<img id="VideosSlideOut" class="dropshadow iconborder" src="Videos.png">
<img id="MusicSlideOut" class="dropshadow iconborder" src="Music.png">
<img id="DocumentsSlideOut" class="dropshadow iconborder" src="Documents.png">
<img id="EmailSlideOut" class="dropshadow iconborder" src="Email.png">
</body>
Any clues?
Im not sure why are you using keyframes for just a simple hover animation.
You can use css3 transitions just for that animation
see demo
#-webkit-keyframes icongrow {
0%{
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
border-color:#ccc;
}
}
.iconborder{
text-align:center;
border: solid 5px #fff; /* use shorthand */
border-radius: 100em;
/* customize */
-webkit-transition : border 0.2s linear;
/*-webkit-animation-duration: 0.2s;*/
}
.iconborder:hover{
border: 10px solid #fff;
width: 130px;
height: 130px;
cursor:pointer;
/* -webkit-animation-name: icongrow;
-webkit-animation-fill-mode: forwards;*/
}
#-webkit-keyframes FTPSlideOutAnimate {
0%{
opacity:0;
-webkit-transform: translate(0,0);
}
100% {
opacity:1;
-webkit-transform: translate(-300px, -150px);
}
}
#FTPSlideOut{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
/* customize */
opacity:0.1;
-webkit-transition: -webkit-transform 1s ease-in,
opacity 0.5s linear;
}
#FTPSlideOut:hover{
-webkit-transform: translate(-300px, -150px);
opacity:1;
/*-webkit-animation: FTPSlideOutAnimate 0.2s linear;
-webkit-animation-fill-mode: forwards; */
}
http://jsfiddle.net/phcba/2/
in that fiddle you can uncomment the keyframes properties just to check and see how bad the animation it was when using Keyframes if not done right for your hover effect
Also im not sure how the #FTPSlideOut is position and displayed on your site, so I made it barely visible in that demo. Ive used Opacity instead of visibilty, you'll need to modify it in your case.
For more info about CSS3 transtions:
http://css-tricks.com/almanac/properties/t/transition/
cheers
Just put your animation in the class pseudo selector with the hover in it? like this
.clickMes {
color: white;
font-size: 17pt;
text-decoration: none;
}
.clickMes:active {
color: cyan;
}
.clickMes:hover {
animation: clickmes 1.3s infinite;
}
#keyframes clickmes {
0% {
background-color: none;
}
50% {
background-color: cyan;
}
100% {
background-color: none;
}
}
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}