Animate text word for word - html

I have a text I want to transform afterViewInit to create some kind of fade in animation.
I want this text to be animated word for word with a short delay in between each span, so that they are being animated consecutive.
<div class="normal position-fixed align-to-top">
<div [style.opacity]="opacity" class="row mt-5">
<div class="col-6 offset-3 text-justify">
<p>
<span class="start-animation" [class.enter-animation]="animation">Nørebro Studios</span> is a creative & digital design agency
that partners with ambitious creatives to create bold
brande experiences for people, worldwide.
</p>
</div>
</div>
</div>
My approach was to create multiple spans that contain each 1-2 words. As you might see, I've solely animated one span yet. It works - but how do I animate the following words with a delay? For the first span I set animation = true after view init.
FYI CSS:
.start-animation {
-webkit-transition: opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
transition: opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
transition: transform .2s cubic-bezier(.4,0,1,1),opacity .2s cubic-bezier(.4,0,1,1);
transition: transform .2s cubic-bezier(.4,0,1,1),opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
display: block;
opacity: 0;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.enter-animation {
-webkit-transition: opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
transition: opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
transition: transform .5s cubic-bezier(0,0,.2,1),opacity .5s cubic-bezier(0,0,.2,1);
transition: transform .5s cubic-bezier(0,0,.2,1),opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
transition-property: transform, opacity, -webkit-transform;
transition-duration: 0.5s, 0.5s, 0.5s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1);
transition-delay: 0s, 0s, 0s;
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

Related

tab hover with CSS

In these three cases, is there a way to write in CSS?
In normal mode
In hover mode
Out of hover
.tab:hover:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
enter image description here
js

There's only :hover in CSS but in Javascript you have mouseover and mouseout if that's of any use?

CSS rotation not centered

So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!

The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.

Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.

CSS3 hover on/off effects in Chrome skip animation

So my hover effect works just fine in every browser including IE9+ and it does work in Chrome except hovering on/off the element in certain places can make it skip the animation and snap straight back to the starting positing instead of fading slowly.
This only happens with Chrome, is it a bug, or is there something I can add in my code to smooth things out for Chrome and make sure it always animates back to the default state instead of just jumping to it.
Its using an image with the following class attached to it, the image is also using shape-outside to form text around it so i've included all the CSS code below - the animation slightly rotates and tilts the device picture on hover.
.floatleft {
float:left;
width: 240px;
height: 341px;
-webkit-shape-outside: url(http://url.com/image.png);
-o-shape-outside: url(http://url.com/image.png);
shape-outside: url(http://url.com/image.png);
-webkit-shape-image-threshold: 0.5;
-o-shape-image-threshold: 0.5;
shape-image-threshold: 0.5;
-webkit-shape-margin: 20px;
-o-shape-margin: 20px;
shape-margin: 20px;
margin:20px;
display:inline-block;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out;
transition-timing-function: linear;
}
.floatleft:hover, .floatleft:active
{
-webkit-transform:rotateX(-13deg) rotate(-5deg);
transform:rotateX(-13deg) rotate(-5deg);
-o-transform:rotateX(-13deg) rotate(-5deg);
-moz-transform:rotateX(-13deg) rotate(-5deg);
-ms-transform:rotateX(-13deg) rotate(-5deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
Heres the Fiddle - http://jsfiddle.net/d5wnnqfd/

CSS: image hovering -> fading away

I'm trying to make an image fade when hovering and just normal when not hovering. When I just put my code in a small html file everything seems to work fine. But when I insert my code into a wordpress website, using the Black Studio Tiny MCE plugin, only the fading away seems to work. Does someone maybe have an idea how to solve this?
Thanks,
J.
#test_menu {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
#test_menu:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
<div style="position:relative;width:496.5px;height:124.125px;">
<a href="https://epowerhr.be/hr-software-oplossing-talent/ehrm-performance-management-software/">
<img id="test_menu" src="https://epowerhr.be/wp-content/uploads/2014/10/shutterstock_190964189.jpg" style="position:absolute;left:0;top:0;" />
<p style="z-index:100;position:absolute;color:black;font-size:24px;font-weight:bold;left:50px;top:50px;">
Performance management
</p></a>
</div>

Something like this?
img, img:hover {-webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
img:hover {opacity: 0;}
<img src="http://placehold.it/350x150" />

Full hover animation duration with quick mouseover/mouseout?

I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)

I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.