diff --git a/src/js/script.js b/src/js/script.js index c59aebd17..656be8413 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1300,7 +1300,11 @@ function stopCaretAnimation() { function startCaretAnimation() { if (caretAnimating === false) { - $("#caret").css("animation-name", "caretFlash"); + if (config.smoothCaret) { + $("#caret").css("animation-name", "caretFlashSmooth"); + } else { + $("#caret").css("animation-name", "caretFlashHard"); + } caretAnimating = true; } } diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 59271b3e6..053bec941 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -972,11 +972,21 @@ function setWordCount(wordCount, nosave) { function setSmoothCaret(mode, nosave) { config.smoothCaret = mode; if (!nosave) saveConfigToCookie(); + if (mode) { + $("#caret").css("animation-name", "caretFlashSmooth"); + } else { + $("#caret").css("animation-name", "caretFlashHard"); + } } function toggleSmoothCaret() { config.smoothCaret = !config.smoothCaret; saveConfigToCookie(); + if (config.smoothCaret) { + $("#caret").css("animation-name", "caretFlashSmooth"); + } else { + $("#caret").css("animation-name", "caretFlashHard"); + } } //startgraphsatzero diff --git a/src/sass/style.scss b/src/sass/style.scss index fdf0ba27f..c0975db62 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -993,7 +993,7 @@ a:hover { #caret { height: 1.5rem; background: var(--caret-color); - animation-name: caretFlash; + animation-name: caretFlashSmooth; /* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */ animation-iteration-count: infinite; animation-duration: 1s; @@ -1078,7 +1078,7 @@ a:hover { } } -@keyframes caretFlash { +@keyframes caretFlashSmooth { 0%, 100% { opacity: 0; @@ -1089,6 +1089,18 @@ a:hover { } } +@keyframes caretFlashHard { + 0%, + 50% { + opacity: 0; + } + + 51%, + 100% { + opacity: 1; + } +} + #menu { font-size: 1rem; line-height: 1rem;