CSS Animation: How to Hide and Show Text with translateY

{"title":"i want to hide text with translateY. and show it by animation \nmay you help with css","description":"Sure! You can use CSS animations and the transform property to hide and show text using translateY. Here's an example:\n\nHTML:\nhtml\n<div class="text-container">\n <p class="hidden-text">This is hidden text</p>\n <button class="show-button">Show Text</button>\n</div>\n\n\nCSS:\ncss\n.text-container {\n position: relative;\n overflow: hidden;\n}\n\n.hidden-text {\n transform: translateY(-100%);\n}\n\n.show-button {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n@keyframes showAnimation {\n 0% {\n transform: translateY(-100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes hideAnimation {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-100%);\n }\n}\n\n\nJavaScript:\njavascript\nconst showButton = document.querySelector('.show-button');\nconst hiddenText = document.querySelector('.hidden-text');\n\nshowButton.addEventListener('click', () => {\n hiddenText.style.animation = 'showAnimation 1s forwards';\n});\n\nhiddenText.addEventListener('animationend', () => {\n hiddenText.style.animation = '';\n});\n\n\nIn this example, the hidden text starts off with a translateY value of -100%, which hides it above the container. When the "Show Text" button is clicked, the showAnimation animation is applied to the hidden text, which moves it from -100% to 0 on the Y-axis, making it visible. The forwards keyword in the animation shorthand property makes sure that the final animation state is retained. \n\nAfter the animation ends, the animationend event listener is triggered, and we remove the animation property from the hidden text element by setting it back to an empty string.\n\nYou can modify the animation duration (1s in this example) and other properties to fit your needs.\n