Hello i am using css3 to animate place holder i figured out to run this on webkit navigators but firefox and ie the animation doesn't work and i think the problem is #keyframes please guys any solution guys ?
input::-moz-placeholder {
color: #8D8D8D;
}
input::-webkit-input-placeholder {
color: #8D8D8D;
}
input:-ms-input-placeholder {
color: #8D8D8D;
}
input:focus::-moz-placeholder {
animation-duration: 0.4s;
animation-name: slidein;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
input:focus::-webkit-input-placeholder {
-webkit-animation-duration: 0.4s;
-webkit-animation-name: slidein;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.1s;
}
input:focus:-ms-input-placeholder {
opacity: 0;
}
input {
color: black;
padding-left: 0px;
padding-right: 10px;
}
#-webkit-keyframes slidein {
from {
opacity: 1;
padding-left: 0px;
}
to {
opacity: 0;
padding-left: 10px;
}
}
#keyframes slidein {
from {
opacity: 1;
padding-left: 0px;
padding-right: 10px;
}
to {
opacity: 0;
padding-left: 10px;
padding-right: 0px;
}
}
this is live demo http://jsfiddle.net/Cd8MG/
you need #-ms-keyframes, #-moz-keyframes, #-webkit-keyframes, and #keyframes to cover all of your bases. Yes, your code will be 10 miles long.
Ok My final conclusion is :
No one seems to have noticed, but in Firefox the behavior of the placeholder attribute is to leave the text until the user begins typing, at least in the most recent versions. Webkit solutions (or should I say -webkit solutions) to Webkit problems don’t seem to last long these days.
Related
I can't make transition on 'color' work because this property is used in a startup animation. However 'background-color' behaves how it should.
This is my CSS:
div{
font-size: 7rem;
animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;
transition: background-color 2s, color 2s;
}
div:hover{
background-color: black;
color: white;
animation-fill-mode: none;
}
#keyframes appearance{
0%{
color: white;
}
100%{
color: black;
}
}
JSFiddle that demostrates what I mean
Any tips to make transition work?
You need to wrap it into another div/section. You can find the working snippet below.
I have wrapped it into a section, and given the page load animation to the section, while the hover effect to the div.
section {
animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;
color: black;
}
div {
font-size: 7rem;
transition: all 2s ease;
}
div:hover {
background-color: black;
color: white;
animation-fill-mode: none;
}
#keyframes appearance {
0% {
color: white;
}
100% {
color: black;
}
}
<section>
<div>
text
</div>
</section>
This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Closed 3 years ago.
I have an element, that appears in the page with fade-in animation. Element has an overlay on the whole page when it is clicked (something like modal). It works fine in every browser except Firefox.
Removing animation-fill-mode: both fixes the problem, but I need this property.
const element = document.getElementById('element');
let isClicked = false;
element.addEventListener('click', handleClick, false);
function handleClick() {
if (isClicked) {
element.classList.add('isVisible');
} else {
element.classList.remove('isVisible');
}
isClicked = !isClicked;
}
.element {
width: 200px;
height: 40px;
background: red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
animation-delay: 100ms;
animation-timing-function: ease;
animation-duration: 200ms;
animation-name: fadeIn;
/* animation-fill-mode: both; */
}
.isVisible {
::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: tomato;
z-index: -1;
animation-timing-function: ease;
animation-duration: 300ms;
animation-name: fadeIn;
}
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
<div class="element" id="element">
<p>
element
</p>
</div>
Please add animation delay for that.. it will may be work.
css
.element {
animation-delay: 1s;
}
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 trying to get the typing animation effect to continue one line at a time when the size of parent container forces the text to span multiple lines.
/* The typing effect */
#keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: green;
}
}
.animated-text {
font: bold 1.45em monospace;
color: black;
border-right: 0.6em solid;
overflow: hidden; /* Ensures the content is not revealed until the animation */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation: typing 3.5s steps(40, end), blink-caret 0.9s step-end infinite;
}
.container {
border: 10px solid;
position: absolute;
width: 25%;
height: 32%;
left: 35%
}
<div class='container'>
<h1 class='animated-text'>The typing effect should continue line by line at a time when the text needs to wrap</h1>
</div>
I've been searching for the answer to this question as well.
The closest I could find was this - multiline typewriter effect. However, you have to manually set the width of each p tag. I've yet to find a way to dynamically set the width of each line.
All lines except for the last line uses border-right to display the typewriter effect, only the last line has blink animation which is the typewriter cursor.
<div class="css-typing">
<p>
Hi I'm Jenssen Lee! Looking to start my career as a Front-End Developer in Singapore.
</p>
<p>
I have experience with HTML, SASS, Bootstrap, JavaScript, jQuery, React, Node.js, Express.
</p>
<p>
This site was designed and built by me - the code is available on Github.
</p>
</div>
.css-typing p {
border-right: .15em solid orange;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 780px; /* manually set width */
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 780px; /* manually set width */
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 620px; /* manually set width */
opacity: 0;
-webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
animation: type3 2s steps(20, end), blink .5s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some text that I rotate and fade in. My problem is the text has no colour, and I would like to make it blue.
As you can see, I do assign a color attribute to the rubber class, but it does not seem to be taking effect.
Please can anyone advise how I can change my css to achieve this? Thank you
.rubber {
padding: 5px 2px;
color: blue;
font-family: 'Black Ops One', cursive;
text-transform: uppercase;
text-align: center;
width: 155px;
transform: rotate(-10deg);
}
// fade-in
.fade-in p {
margin-top: 25px;
text-align: center;
animation: fadein 8s;
-moz-animation: fadein 8s;
/* Firefox */
-webkit-animation: fadein 8s;
/* Safari and Chrome */
-o-animation: fadein 8s;
/* Opera */
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
<div class="rubber fade-in">
<p>Job Offered</p>
</div>
Please replace // fade-in with /* fade-in */ . In css
to add comment line you should use /* comment here */
Here is the working code
.rubber {
padding: 5px 2px;
color: blue;
font-family: 'Black Ops One', cursive;
text-transform: uppercase;
text-align: center;
width: 155px;
transform: rotate(-10deg);
}
/* fade in */
.fade-in p{
margin-top: 25px;
text-align: center;
animation: fadein 8s;
-moz-animation: fadein 8s; /* Firefox */
-webkit-animation: fadein 8s; /* Safari and Chrome */
-o-animation: fadein 8s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
<div class="rubber fade-in"><p>Job Offered</p></div>
I tried your code in jsfiddle as well as it normal HTML page.
Only problem was with the comment in css style tag use this format
/ Shift+8 comment Shift+8/