I have put a css in my outlook signature, however when I send an email it doesn't work.
<head>
<style>
.typewriter h4 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 30% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
</head>
<div class="typewriter">
<h4>Gaurang Shah</h4>
</div>
Above is my code, however in email signature I see no movement in Text.
Unfortunately, Outlook doesn’t support animation property. You could refer to this link:
https://www.campaignmonitor.com/css/animations/animation/
However, if possible, you could try use GIF to achieve your request.
For more information, please see the following link:
The animated graphic in my e-mail message doesn't work
Related
I have 1 error and 1 question:
Error: Image
If you see on the right side, the cursor has gone to the right side completely
Question:
How do I do that after the typewriter effect of "typeWriter1" is completed it starts effect of "typeWriter2"
I tried to use display: inline-block
It did work but it became very choppy it looked like it was coming from left side of border
#introduction {
font-size: 175%;
color: #d3d3d3;
text-align: center;
font-family: "Solitreo", sans-serif;
}
/* Typewriter effect */
.typeWriter .typeWriter1 {
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
/* 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: orange;
}
}
<div id="introduction">
<div class="typeWriter">
<h1 class="typeWriter1">I am Anay,</h1>
<h1 class="typeWriter2">A programmer</h1>
</div>
</div>
I try to animate some text with html and css. For the moment, I've this :
<div id="rectangle"></div>
<p>Hello world</p>
body {
margin:0
}
#rectangle{
position: absolue;
width:100%;
height:100px;
background:#1D2024;
}
p {
margin-top: -60px;
margin-left: 30%;
border-right: solid 3px rgba(87, 203, 204,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: #57CBCC;
}
/* Animation */
p {
animation: animated-text 4s steps(29,end) 1s 1 normal both,
animated-cursor 600ms steps(29,end) infinite;
}
/* text animation */
#keyframes animated-text{
from{width: 0;}
to{width: 472px;}
}
/* cursor animations */
#keyframes animated-cursor{
from{border-right-color: rgba(87, 203, 204,.75);}
to{border-right-color: transparent;}
}
The codepen is here : https://codepen.io/aakhya/pen/EOxqOV
Why the cursor is stopping so far away after the " d " ? Someone could show me how to stopped the cursor just after the d ?
Thanks a lot
The reason the cursor is stopping so far after the letter d is because of these lines of code:
#keyframes animated-text{
from{width: 0;}
to{width: 472px;}
}
The code that says "to{width: 472px;}" means that the cursor will start 472px after it starts.
To fix this, you can edit the width so that it stops right after the d.
A potential alternative to your current animation that you might be looking for is the following:
#keyframes typing {
0% {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
If you put this into your code, along with:
animation: typing 2s steps(11), blink .5s infinite alternate;
(editing it to your needs, of course), and add a width to your p tag, it will give you the animation that accomplishes what you need once you figure out the width through experimentation.
If you want one letter to appear at a time, just make the number of steps equal to the number of characters.
Through experimentation, the width of "Hello World" in this case is about 185px, and requires 11 steps. If you want it to appear faster, you can edit the number of seconds in the animation.
p {
width: 185px;
border-right: solid 3px rgba(0,255,0,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(255,255,255,.70);
}
/* Animation */
p {
animation: typing 2s steps(11), blink .5s infinite alternate;
}
/* text animation */
#keyframes typing{
0%{
width: 0
}
}
/* cursor animations */
#keyframes blink{
50% {
border-color: transparent
}
}
I have CSS animations running on an HTML element but I am unable to position the HTML element freely on the HTML page so, how would I do this?
I have tried using doing this in order to position the HTML element freely on the page.
<div style="text-align: center;"><p class="animated flipInX">2</p></div>
But it does not work.
/* GLOBAL STYLES */
body {
background: #011;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: Consolas,monaco,monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* 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: white }
}
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<div class="typewriter">
<h1>1</h1>
</div>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<p class="animated flipInX">2</p>
</head>
</html>
To position things anywhere on the screen, likely means you also want to be able to use any part of the screen even if there were items all over the page. Best way to do this is to use the position css property. so on whatever you want to move around, write a css class or id to it like this;
position: absolute;
z-index: 1;
top: 0px;
left: 200px;
Here is a link I played with the example you gave. https://jsfiddle.net/cphutx78/
Let me know if it hel
I have made the animation that writes:
"[Your Name] blah blah"
in typing effect. Now I want the cursor to jump to next line and write:
"[Your Father Name] blah blah"
I have tried adding <br> but it writes both lines at the same time and I want it one after the other.
.typewriter h1 {
color: black;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* 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: orange; }
}
<div class="typewriter" class="username">
<h1>
[Your Name] blah blah
</h1>
</div>
So this is my solution on how somebody could to this:
Basically you can toggle a class, that gives your <div> the desired animation effect.
The first typewrite line is visible, and has a class first typing
The second typewriter line is hidden at first, and its class is just second (without typing)
I now have a js file that checks every 500ms, if the first line is done typing, by checking
if ($('.first').parent().width() - $('.first').innerWidth() <= 10)
This means that the width of the child is about (~) the width of the parent.
(The difference is < 10 px)
As soon as the first line is "done" with typing (e.g. its width is almost the parent divs width). add the class typing to the second line that you want to type, so that it triggers the animation in the css because the second line now also has a class typing.
You can then also remove the typing class from the first line etc... (but make sure the css for first stays the same after removing typing from the first line or otherwise the look will change)
var checking = 1;
function checkForChanges()
{
console.log($('.first').parent().width() - $('.first').innerWidth());
if ($('.first').parent().width() - $('.first').innerWidth() <= 10) {
//div is as big as parent
$(".second").css("visibility", "visible");
$(".second").addClass("typing");
//$(".first").removeClass("typing");
} else {
// div is smaller/bigger than parent
}
setTimeout(checkForChanges, 500);
}
checkForChanges(checking);
.typewriter{
width: 100%;
}
.typing {
color: black;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* 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: orange; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="typewriter" class="username">
<h1 class="first typing">
[Your Name] blah blah
</h1>
<h1 class="second" style="visibility: hidden">
[My Name] blah blah
</h1>
</div>
I'm trying make an animation as if I was typing. To achieve this I'm using CSS animation 'steps'.
The animation itself works just fine. However, if I want to animate multiple lines of text, they all start playing at the same time. Which isn't giving me the desired effect. (Tried using <br> in a single <h1>, which cut off the text, but again started the animations simultaneously.)
To counter this, I put the next line of text in an <h2> and set an animation-delay for every line of text. Which works, but the text is visible before the animation starts.
I want the text to be hidden until the animation starts playing, to really get that 'live typing' effect.
Anyone got any ideas on how I can achieve this?
HTML
<div class="content">
<h1>Hi there! My name is Jeff.</h1>
<h2>And I create cool stuff.</h2>
</div>
CSS
.content h1 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end 2s;
}
.content h2 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end infinite;
-webkit-animation-delay:3s;
}
#-webkit-keyframes typing {
from { width: 0; }
to { width:400px; }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
jsFiddle
The simplest solution is to add:
animation-fill-mode:both;
to your h2 (with the necessary prefixes). That way, you aren't setting it to a zero width outside of your animation, so browsers that don't support this CSS will display the heading (which I guess is what you're after). See this fiddle.
The animation-fill-mode:
specifies how a CSS animation should apply styles to its target before
and after it is executing
Setting it to both in this instance means that your h2 will have a width of 0 before it starts executing, and a width of 400px after.
As the comments already include a solution, perhaps this might be another way of doing it - by using timeouts and setting visibility: hidden at the beginning (For simplification I just used jQuery to set the visiblitiy).
Include the following CSS rule:
.content {
visibility: hidden;
}
As JavaScript you would have:
window.setTimeout(function() {
$('#contentdiv h1').css('visibility', 'visible');
}, 100);
window.setTimeout(function() {
$('#contentdiv h2').css('visibility', 'visible');
}, 3100);
See the jsFiddle
p
{
font:500 22px consolas;
width:20ch;
white-space:nowrap;
overflow:hidden;
animation:type 5s steps(20) infinite;
}
#keyframes type
{
0%{ width:0; }
}
<p>Text Type Animation</p>
Not quite the OP's question, but in case someone else finds this useful:
I wanted to be able to typing-animate a pararaph of text, a single <p> tag which might contain text that would wrap, and produce an unknown number of actual lines. Applying a simple linear animation to the p tag itself wouldn't work, so instead, I took the approach of having several "hider" elements that would cover the paragraph of text, each one line high, and then I would animate each of those so they would shrink away, reveal characters from the line of text beneath them.
The HTML looks like this:
<div class="container">
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap -->
<p class="typing">
This paragraph of text will be animated
with a "typewriter" style effect, and it
will continue to work even if it splits across
multiple lines. Well, in this case, up to a
maximum of 5 lines, but you get the picture.
</p>
<div class="hiders">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
You need a container, and position the .typing element and the .hiders using absolute so that they're on top of each other:
.container {
position: relative;
font-family: Consolas, monospace;
}
.typing {
position: absolute;
top: 0;
margin: 0;
z-index: -1;
}
.hiders {
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
And the animation gets applied to each p inside the .hiders:
.hiders p {
position: relative;
clear: both;
margin: 0;
float: right; /* makes animation go left-to-right */
width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
background: white; /* same as page background */
animation: typing 2s steps(30, end);
animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */
}
.hiders p:nth-child(2) {
animation-delay: 2s;
}
.hiders p:nth-child(3) {
animation-delay: 4s;
/* etc */
Here's the final fiddle:
https://jsfiddle.net/hjwp/514cLzxn/
Original credit for inspiration: Lea Verou