Css hide text animation

To hide an HTML element after certain seconds using CSS, you can use the @keyframes CSS rule and set the CSS property called visibility to value hidden for that particular element in CSS.

TL;DR

div id="hideMeAfter5Seconds">Hello World! div>

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; > @keyframes hideAnimation < to < visibility: hidden; width: 0; height: 0; > >

For example, let’s say we have a div with some content Hello world! inside it which we need to hide after 5 seconds.

So for that let’s first create the div and also set an id attribute to it so we can reference it later in the CSS. It can be done like this,

div id="hideMeAfter5Seconds">Hello World! div>

Now in the CSS, we can refernce the hideMeAfter5Seconds div id like this,

After that, let’s use the animation css property and define 4 properties like this,

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; >

As you can see from the above css declaration, we have set some properties like hideAnimation , 0s , ease-in , and 5s .

The first one, hideAnimation is the name of the animation which we need to declare using the @keyframes rule. This is where we will define the auto-hiding logic for the div HTML element.
Advertisement area The second one is the animation duration which we have set to 0s because we don’t need the animation to run for any amount of seconds. We just need to execute some properties immediately in the hideAnimation animation.
The third one is the animation timing function, which defines the speed curve of the animation. In our case, we have set it to be ease-in .
Advertisement area The fourth one is the delay of the animation which we have set to 5s so that animation waits for 5s then executes it.

After that we can use the CSS animation-fill-mode property and set its value to forwards like this,

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; >

Now we have declared the animation property, now we need to set the behavior of the hideAnimation animation itself using the @keyframes css rule.

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; > @keyframes hideAnimation < // animation behavior >

Inside the hideAnimation , we can use the the to value or block and set the css visibiltiy property to hidden like this,

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; > @keyframes hideAnimation < to < visibility: hidden; > >

So at the end when the browser loads the above process works like this,

CSS gets loaded to the browser
The Browser sees the animation property and waits for 5s to execute the hideAnimation animation.
Since we have set the running time or the duration of the animation to 0s , the to block is immediately executed after waiting for 5 seconds, and the visibility:hidden CSS property gets applied to the div element which hides the div .

Читайте также: Масштабирование фона

The visibility:hidden only sets the visible state of the div element and doesn’t remove the entire div from the visual flow. To remove it we can also set its CSS width and the height property to 0 like this,

#hideMeAfter5Seconds < animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; > @keyframes hideAnimation < to < visibility: hidden; width: 0; height: 0; > >

That’s it we have successfully hidden the element after 5 seconds. 🎉 Yay 😃!

See the above code live in JSBin

One question may arise on why couldn’t we use the display CSS property and set its value to none . This is because we cannot animate the display property and thus it will not work inside the to block.

Software engineer and web development blogger

Источник

Show/Hide HTML Elements With Animation (Simple Examples)

Welcome to a tutorial on how to show/hide HTML elements with animations. So you need to toggle the visibility of an element, but with bells and whistles?

The HTML element –
TEXT
The CSS classes:
- #fade < transition: opacity 1s; >
- .hide
- Lastly, just toggle the hide CSS class using Javascript – document.getElementById(«fade»).classList.toggle(«hide»);
Yes, setting the CSS transition is all it takes to create the animation magic. But at the time of writing, it is impossible to animate display: none , thus the “roundabout” way to set the visibility and opacity . Read on for more examples!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

SHOW/HIDE HTML ELEMENTS WITH ANIMATION

All right, let us now get into more examples of toggling the visibility of an HTML element, with animations.

EXAMPLE 1) FADE IN & OUT

FADE DEMO

1A) THE HTML

These shouldn’t be too much of a mystery. Just a dummy and to toggle the fade effect.

1B) THE CSS
```
/* (A) SET CSS TRANSITION */ #fade < transition: all 1s; >/* (B) HIDE */ #fade.hide < visibility: hidden; opacity: 0; height: 0; /* optional */ >
```
This is the same as the snippet in the introduction, but take note of the additional height: 0 here. Yes, we can hide an element using visibility: hidden , but it will still “occupy space”. Use height: 0 if you want to collapse the element on hiding.

1C) THE JAVASCRIPT

Just a one-line Javascript to toggle the hide CSS class on the HTML element.

EXAMPLE 2) SLIDE IN & OUT

SLIDE DEMO

2A) THE HTML

2B) THE CSS
```
#slide < /* (A) TURN INTO A BOX */ background: #cf2f1d; padding: 10px; border: 1px solid #b52110; color: #fff; font-weight: bold; /* (B) DEFAULT - HIDE OUT OF SCREEN */ position: fixed; bottom: 5px; left: -999px; /* (C) CSS ANIMATION */ transition: all 0.5s; visibility: hidden; >/* (D) SHOW - BRING ELEMENT BACK ON SCREEN */ #slide.show
```
1. Turn the element into a “box” instead.
2. Hide it off the screen with position: fixed and left: -999px .
3. Same old CSS animation.
4. Lastly, bring the element back onto the screen with left: 5px .
2C) THE JAVASCRIPT

Same old “toggle” CSS class, except this is show instead.

EXAMPLE 3) COLLAPSE

COLLAPSE DEMO

3A) THE HTML

3B) THE CSS
```
/* (A) CONTENT BOX */ #collapse < /* (A1) BACKGROUND IMAGE */ background-image: url("show-hide.jpg"); background-size: cover; background-position: center; /* (A2) DIMENSIONS */ max-width: 700px; /* optional */ height: 300px; /* fixed size required */ /* (A3) CSS TRANSITION */ transition: all 0.5s; >/* (B) HIDE */ #collapse.hide
```
This one should be self-explanatory too – We are just toggling height: 0 to collapse and expand a container. Yes, for CSS animation to work with width height , they cannot be set to auto .

3C) THE JAVASCRIPT

I don’t think this needs explanation by now.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Show hidden text on hover with animation

This means that the content in the span is initially hidden but shown when the item is hovered, currently if the content on the li is too big it simply pushes the content down, is there a way to only push as much content as necessary? I tried using word-break but that didn’t seem to work. Also, I want to have the slide animation when hovering.

How that fiddle show what you want? it’s just an input field, no hover effect anywhere, you want to break the lines on the input? use textarea or div contenteditable

3 Answers 3

You can use width: auto; instead of fixed width on hover.

For continuous text you can apply white-space: nowrap; . For animation you probably need to use some Javascript if the span can’t be fixed width, since the current CSS doesn’t allow to use auto width / height for transition. Below I use jQuery to get the width of the span.
```
spanWidth = $('li span').width(); $('li span').css('width', '0'); $('li').hover( function() < $('span', this).css('width', spanWidth); >, function() < $('span', this).css('width', '0'); >);
```
```
/*hide the span, works together with the script*/ span < display: inline-block; white-space: nowrap; vertical-align: top; overflow: hidden; transition: all .5s; >/*get rid of the extra whitespace, use it as needed*/ span < margin-right: -4px; >li:hover span
```
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu tincidunt velit. Nam gravida venenatis mollis. Cras sed lacus varius, pretium nulla eget, auctor diam. Suspendisse ullamcorper ex nisi, non scelerisque lorem pellentesque id. Mauris non bibendum libero, vel efficitur lorem.
Источник

Показать/скрыть текст. Примеры на JS, CSS

Давайте рассмотрим разные примеры того, как можно показать/скрыть текст по нажатию на кнопку. Обычно такая функция называется спойлер или аккордеон. Это когда весь текст или половина его скрыта от просмотра, и только при нажатии на кнопку, или определённый элемент, открывается весь текст.

Разнообразие реализации такой фишки, как показать/скрыть текст может быть огромное количество. Есть разный подход к технической части: на чистой JavaScript, jQuery, чистый CSS, HTML. Для WordPress можно найти специальные плагины или сделать раскрывающийся текст без плагина.

Показать скрыть текст JS

Первые примеры будут с использованием JS/jQuery. Всё представленное ниже можно «прикрутить» к любому сайту на любой платформе. Внешний вид, то есть дизайн, легко редактируется с помощью CSS.

Первый пример Посмотреть демо
```
  
```
.spoiler_wrap < position: relative; margin-bottom: 20px; font-size: 22px; background: #fff; border-radius: 5px; height: fit-content; >.spoiler_title < cursor: pointer; >.spoiler_title, .spoiler_content < padding: 30px 26px; >.spoiler_content < padding-top: 0; padding-bottom: 10px; transition: 0.15s ease-out; height: auto; max-height: 0px; overflow: hidden; margin-top: -10px; opacity: 0; font-size: 14px; color: #444; >.spoiler_content p < font-size: 16px; margin: 20px 0; color: #333; line-height: 1.4; >.spoiler_content.open < margin-top: 0; max-height: 100%; opacity: 1; >.spoiler_title .spoiler_arrow < display: inline-block; margin-left: 15px; font-size: 20px; transition: all .1s; vertical-align: middle; >.spoiler_title .spoiler_arrow svg < fill: red; width: 13px; >.spoiler_title .spoiler_arrow.open

Второй пример Посмотреть демо
```
  
```
.morecontent span < display: none; >.morelink

Третий пример Посмотреть демо
```
  
```
```
.spoiler_wrap < border-bottom: 1px solid #999999; margin-bottom: 15px; >.spoiler_wrap.active .spoiler_content < max-height: 500px !important; padding-bottom: 25px; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_wrap.active .spoiler_title < color: #808080; transition: color 0.3s ease; >.spoiler_content < color: #090909; font-family: serif; font-size: 16px; line-height: 24px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_content p < margin-bottom: 25px; >.plus-minus-toggle < cursor: pointer; height: 21px; position: absolute; width: 21px; left: -40px; top: 50%; z-index: 2; >.plus-minus-toggle:before, .plus-minus-toggle:after < background: #000; content: ''; height: 4px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease; >.plus-minus-toggle:after < transform-origin: center; >.plus-minus-toggle.collapsed:after < transform: rotate(90deg); >.plus-minus-toggle.collapsed:before < transform: rotate(180deg); >.spoiler_title < color: #090909; font-family: sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; position: relative; cursor: pointer; padding: 20px 0; transition: color 0.5s ease; >@media screen and (max-width: 767px) < .spoiler_title < font-size: 18px; >>
```
Четвертый пример Посмотреть демо
```
  
```
.spoiler_wrap < margin-bottom: 40px; >.spoiler_title_wrap < display: block; padding: 0px; >.spoiler_title < margin-bottom: 20px; font-size: 22px; font-weight: 600; color: #000; cursor: pointer; display: table; transition: all .3s ease-in-out; position: relative; >.spoiler_title:hover, .expanded .spoiler_title < opacity: 0.7; >.spoiler_content < font-size: 16px; border-radius: 5px; line-height: 26px; display: none; margin-bottom: 30px; padding: 30px; background: #333; position: relative; >.spoiler_content p < color: #999; margin-bottom: 25px; >.spoiler_content p:last-child < margin-bottom: 0px; >.arrow-t < transform: rotate(-45deg); display: block; position: absolute; top: 7px; right: -33px; width: 10px; height: 10px; background: transparent; border-left: 3px solid #000; border-bottom: 3px solid #000; transition: all .3s ease-in-out; >.arrow-b

Пятый пример Посмотреть демо
```
  
```
.text_hide_wrap < max-width: 700px; >.item_text < width: 100%; padding: 20px; >.item_text p < margin-bottom: 20px; >.io_item < width: 100%; padding-bottom: 20px; >.io_button_wrap < text-align: center; margin-top: 10px; >.io_button < display: inline-block; border: 1px solid #f00; width: auto; padding: 0 20px; line-height: 32px; vertical-align: top; text-transform: uppercase; color: #f00 !important; font-size: 10pt; border-radius: 22px; cursor: pointer; >a.io_button:hover < text-decoration: none; >.io_item .btn_close < display: none; >.io_item .btn_open < display: inline-block; >.io_item.open .btn_close < display: inline-block; >.io_item.open .btn_open < display: none; >.io_trans < width: inherit; position: absolute; height: 80px; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transition: 1s; >.io_item.open .io_trans < height: 0; transition: 1s; >.io_item_wrap < position: relative; overflow: hidden; max-height: 100px; width: inherit; transition: max-height 0.5; >.io_item.open .io_item_wrap

Показать скрыть текст CSS

Подобное скрытие текста можно реализовать одними средствами CSS и HTML. И это не значит какой-то недостаток. В том плане, что будет хуже, чем с помощью JS/jQuery. Да и в целом многое зависит от поставленной задачи. И помните, всегда можно отредактировать стили под свой дизайн сайта.

Первый пример Посмотреть демо
```
 текст
  CSS
```
.spoiler_content < opacity: 1; transition: opacity 0.4s ease-in-out; >.spoiler_content p < text-align: left; margin-bottom: 5px; >.read-more-state < display: none; >.text_hide < opacity: 0; max-height: 0; font-size: 0; transition: opacity 0.4s ease-in-out; >.read-more-state:checked~.spoiler_content .text_hide < opacity: 1; font-size: inherit; max-height: 999em; >.read-more-state:checked~.spoiler_content p < margin-bottom: 20px; >.read-more-state~.read-more-trigger:before < content: 'Показать всё'; >.read-more-state:checked~.read-more-trigger:before < content: 'Скрыть текст'; >.read-more-trigger

Второй пример Посмотреть демо

.spoiler_wrap < position: relative; min-height: 30px; margin-bottom: 15px; >.spoiler_title < width: 100%; position: absolute; top: 0; left: 0; margin: 0; height: 30px; z-index: 1; font-weight: 600; font-size: 18px; >.toggle:checked~.spoiler_title, .spoiler_title:hover < color: #EA2816; >.icon < height: 18px; position: absolute; width: 18px; right: 0; top: 11px; z-index: 2; >.icon:before, .icon:after < background: #333; content: ''; height: 4px; right: 0; position: absolute; top: 0; width: 18px; transition: transform 500ms ease; >.toggle:checked~.icon:before, .toggle:checked~.icon:after < background: #EA2816; >.toggle:not(:checked)~.icon:before < transform: rotate(180deg); >.toggle:not(:checked)~.icon:after < transform: rotate(90deg); >.toggle < width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; position: absolute; top: 0; z-index: 3; >.border < height: 40px; border-bottom: 1px solid #333; >.toggle:checked~.border < border-bottom: 1px solid #EA2816; >.spoiler_content < padding: 15px 0 0 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; transition: .4s ease; >.toggle:checked~.spoiler_content < height: auto; opacity: 1; z-index: 2; >.spoiler_content>p

HTML-тег details: показать скрыть текст

Есть совсем простое решение, чтобы создать кнопку, при нажатии на которую открывается текст. Для этого существуют специальные теги в HTML 5, такие как , . По сути, их можно использовать даже без стилей CSS. Но чтоб всё сделать красиво, конечно, желательно применить каскадную таблицу.
```
 Что такое спойлер?
 текст
 
 Открытый спойлер
 текст
 
 
```
details < min-height: 5px; padding: 25px 70px 25px 25px; margin: 0 auto; position: relative; font-size: 22px; border: 1px solid #333; border-radius: 10px; box-sizing: border-box; transition: all .3s; >details+details < margin-top: 20px; >details[open] < min-height: 50px; >details[open] summary ~ * < animation: anspl .3s cubic-bezier(.52,.41,.75,.74); >@keyframes anspl < 0% 100% > details p < color: #444; font-weight: 400; margin: 15px 0; >details p:last-child < margin-bottom: 0px; >summary < display: flex; align-items: center; font-weight: 500; cursor: pointer; >summary:focus < outline: none; >summary::-webkit-details-marker < display: none >summary::before < content: '+'; padding-right: 0.5em; >details[open]>summary::before

Читайте также:

Источник

Css hide text animation